Я пока не буду говорить о контроле CSS над столом. Во -первых, я поделюсь общепринятым DOMS в таблице ниже.
Обычно используемые методы для добавления табличных операций являются методы INSERTROW () и INSERTCELL ().
ряд рассчитывается из нуля, например:
Скопируйте код следующим образом: var otr = document.getElementById ("member"). INSERTROW (2)
Это означает добавление новой линии ко второй строке.
Кода -копия выглядит следующим образом:
var atext = new Array ();
atext [0] = document.createtextnode ("Fresheggs");
atext [1] = document.createtextnode ("w610");
atext [2] = document.createtextnode ("5 ноября");
atext [3] = document.createTextNode ("Scorpio");
atext [4] = document.createTextNode ("1038818");
for (var i = 0; i <atext.length; i ++) {
var Otd = OTR.InserTcell (i);
otd.appendchild (atext [i]);
}
Переменная OTR вставляет новую строку для таблицы, а затем использует InsertCell для вставки новых данных для этой строки, использует CreateTexTnode для создания нового текстового узла и дает его OTD в AppenDChild, а OTD является новой ячейкой.
1. Вставьте строку (таблица динамического добавления)
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
window.onload = function () {
var OTR = document.getElementById ("член"). INSERTROW (2); // вставьте линию
var atext = new Array ();
atext [0] = document.createtextnode ("Fresheggs");
atext [1] = document.createtextnode ("w610");
atext [2] = document.createtextnode ("5 ноября");
atext [3] = document.createTextNode ("Scorpio");
atext [4] = document.createTextNode ("1038818");
for (var i = 0; i <atext.length; i ++) {
var Otd = OTR.InserTcell (i);
otd.appendchild (atext [i]);
}
}
</script>
<Таблица Summary = "Список участников в EE Sunday" ID = "Член">
<Подпись> Список членов </Подпись>
<tr>
<th Scope = "col"> name </th>
<th Scope = "col"> class </th>
<th Scope = "col"> день рождения </th>
<th Scope = "col"> Contellation </th>
<th Scope = "col"> Mobile </th>
</tr>
<tr>
<TD> Исаак </td>
<TD> W13 </TD>
<Td> 24 июня </td>
<TD> Рак </td>
<TD> 1118159 </td>
</tr>
<tr>
<Td> Girlwing </td>
<TD> W210 </TD>
<Td> 16 сентября </td>
<TD> VIRGO </TD>
<TD> 1307994 </td>
</tr>
<tr>
<TD> TASTESTORY </TD>
<TD> W15 </TD>
<Td> 29 ноября </td>
<Td> Стрелец </td>
<TD> 1095245 </td>
</tr>
</table>
2. Измените содержание таблицы
После создания таблицы вы можете напрямую использовать HTMLDOM для управления таблицей, которая является более удобной, чем Document.getElementById () и Document.GetElementsBytagName ().
Otable.Rows [i] .cell [j]
Вышеупожелое может легко получить доступ к столбцу I-TH и J-TH таблицы через две атрибуты рядов и ячейки (оба подсчитаны от 0). После получения объекта ячейки вы можете использовать атрибут Innerhtml для изменения содержания Xiangyu.
Например, изменить содержание 4 строк и 5 столбцов, чтобы быть хорошим
Тогда вы можете использовать следующий код
Кода -копия выглядит следующим образом:
var Otable = document.getElementById ("table1");
Otable.Rows [4] .cells [5] .innerHtml = "Good";
3. Удалить содержимое таблицы
Поскольку таблица имеет функцию добавления, модификации и удаления ее.
Удаление строк в таблице использует метод Deleterow (i), где я является номером строки.
Удаление столбцов в таблице использует метод DeleteCell (J) TR.
Следующий код указывает вторую строку удаленной таблицы и второй столбец третьей строки исходной таблицы
Кода кода следующая: var ortable = document.getElementById ("table1"); Otable.deleteterow [2]; OTABLE.ROWS [2] .DeleteCell [3];
Следующий код указывает на то, что если вторая строка таблицы удалена, а второй столбец третьей строки исходной таблицы считается динамическим удалением и не влияет на общую структуру HTML, или если содержание таблицы много, может быть принято динамическое удаление и добавление.
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
window.onload = function () {
var OTR = document.getElementById ("член"). INSERTROW (2); // вставьте линию
var atext = new Array ();
atext [0] = document.createtextnode ("Fresheggs");
atext [1] = document.createtextnode ("w610");
atext [2] = document.createtextnode ("5 ноября");
atext [3] = document.createTextNode ("Scorpio");
atext [4] = document.createTextNode ("1038818");
for (var i = 0; i <atext.length; i ++) {
var Otd = OTR.InserTcell (i);
otd.appendchild (atext [i]);
}
}
</script>
<Таблица Summary = "Список участников в EE Sunday" ID = "Член">
<Подпись> Список членов </Подпись>
<tr>
<th Scope = "col"> name </th>
<th Scope = "col"> class </th>
<th Scope = "col"> день рождения </th>
<th Scope = "col"> Contellation </th>
<th Scope = "col"> Mobile </th>
</tr>
<tr>
<TD> Исаак </td>
<TD> W13 </TD>
<Td> 24 июня </td>
<TD> Рак </td>
<TD> 1118159 </td>
</tr>
<tr>
<Td> Girlwing </td>
<TD> W210 </TD>
<Td> 16 сентября </td>
<TD> VIRGO </TD>
<TD> 1307994 </td>
</tr>
<tr>
<TD> TASTESTORY </TD>
<TD> W15 </TD>
<Td> 29 ноября </td>
<Td> Стрелец </td>
<TD> 1095245 </td>
</tr>
</table>
Удалить столбцы
Кода -копия выглядит следующим образом:
функция deleteColumn (Otable, Inum) {
// Настроить функцию удаления столбцов, то есть удалить соответствующую ячейку для каждой строки
для (var i = 0; i <otable.rows.length; i ++)
ortable.rows [i] .deletecell (Inum);
}
window.onload = function () {
var Otable = document.getElementById ("table1");
DeleteColumn (Otable, 2);
}
Для столбцов удаления таблицы в DOM нет непосредственно выявленного метода. Вам нужно написать метод DeleteColumn () самостоятельно. Этот метод принимает два параметра, один параметр является объектом таблицы, а другой параметр - номер столбца, который вы хотите удалить. Метод написания очень прост. Используя метод deleteCell (), каждая строка выполняет соответствующий метод удаления ячеек.