Есть таблица, изображенная слева. Необходимо сделать из нее таблицу, нарисованную справа.
Исходный код таблицы слева:
<table>
<tr>
<td> + </td>
<td></td>
</tr>
<tr>
<td> + </td>
<td></td>
</tr>
</table>
Исходный код таблицы справа:
<table>
<tr>
<td rowspan=2 > + </td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td> + </td>
<td></td>
</tr>
</table>
Как это сделать минимальными телодвижениями с DOM'ом?
Были испробованы следующие приемы:
1. Первой ячейке первой строки задается rowspan=2. Создается новая строка с одной ячейкой и вставляется сразу за текущей. В итоге ожидаемый HTML не наблюдается.
2. Вариант создания таблицы не интересует.
3. Создавал строку, засовывал в DOM, потом выставлял InnerHtml. Фокус опять таки не удался. (не удался скорее всего из-за того, что rowspan менялся в Runtime)
Можно ли в Runtime менять структуру таблицы, менять rowspan'ы и colspan'ы ячеек. И если да, то какой порядок действий и какие ограничения существуют?
P.S. Изначальная задача была сделать деревья в деревьях с одинаковым набором колонок.
Здравствуйте, vonkertis, Вы писали:
V>Есть таблица, изображенная слева. Необходимо сделать из нее таблицу, нарисованную справа.
В Sciter:
<html>
<head>
<style></style>
<script type="text/tiscript">
var table = self.$(table);
function self#add.onClick()
{
var tr0 = table[0];
tr0[0].attributes["rowspan"] = 2;
var tr1 = new Element("tr");
table.insert(tr1,1);
var td = new Element("td","x");
tr1.content(td);
}
</script>
</head>
<body>
<button #add>Add</button>
<table #test border=1>
<tr><td>1</td><td>2</td></tr>
<tr><td>2</td><td>3</td></tr>
</table>
</body>
</html>
Здравствуйте, c-smile, Вы писали:
CS>Здравствуйте, vonkertis, Вы писали:
V>>Есть таблица, изображенная слева. Необходимо сделать из нее таблицу, нарисованную справа.
CS>В Sciter:
Немного не так. Так работать не будет
CS>CS><html>
CS><head>
CS> <style></style>
CS> <script type="text/tiscript">
CS> var table = self.$(table);
CS> function self#add.onClick()
CS> {
CS> var tr0 = table[0];
CS> tr0[0].attributes["rowspan"] = 2;
CS> var tr1 = new Element("tr");
CS> table.insert(tr1,1);
CS> var td = new Element("td","x");
CS> tr1.content(td);
CS> }
CS> </script>
CS></head>
CS><body>
CS> <button #add>Add</button>
CS> <table #test border=1>
CS> <tr><td>1</td><td>2</td></tr>
CS> <tr><td>2</td><td>3</td></tr>
CS> </table>
CS></body>
CS></html>
CS>
Эксперементальным путем выяснилось, что для новой строчки tr1, несмотря на то что tr0.attributes["rowspan"]=2
все равно нужно создавать не одну ячейку, а две (вторую фиктивную).
Вот так будет работать:
<html>
<head>
<style></style>
<script type="text/tiscript">
var table = self.select("#test");
function self#add.onClick()
{
var tr0 = table[0];
tr0[0].attributes["rowspan"] = 2;
var tr1 = new Element("tr");
table.insert(tr1,1);
var td = new Element("td");
tr1.insert(td, 0);
td.html = "test";
tr1.insert(new Element("td"), 0); // <<<<<<< создаем фиктивную ячейку
}
</script>
</head>
<body>
<button #add>Add</button>
<table #test border=1>
<tr><td>1</td><td>2</td></tr>
<tr><td>2</td><td>3</td></tr>
</table>
</body>
</html>
Здравствуйте, Аноним, Вы писали:
CS>>В Sciter:
А>Немного не так. Так работать не будет
Это еще почему?
Hint:
tr1.content(td);
versus твоего
tr1.insert(td);
Метод
Element.content(el1,el2,el3,...)
принимает на вход набор элементов и образует из них новый content элемента.
Как написано в доках и logfile этот метод знает про таблицы и colspan/rowspan.
Здравствуйте, c-smile, Вы писали:
CS>Здравствуйте, Аноним, Вы писали:
CS>>>В Sciter:
А>>Немного не так. Так работать не будет
CS>Это еще почему?
CS>Hint:
CS>tr1.content(td);
CS>versus твоего
CS>tr1.insert(td);
У меня быть может просто старый Sciter (вроде 1.0.8.16), т.к. выскакивает Error: Element (<tr>) has no method content
CS>Метод
CS>Element.content(el1,el2,el3,...)
CS>принимает на вход набор элементов и образует из них новый content элемента.
А в HTMLayout есть эквивалент этого метода?
CS>Как написано в доках и logfile этот метод знает про таблицы и colspan/rowspan.
Недоглядел
