Как создать таблицу в javascript (два способа нарисовать таблицу в javascript)

Автор：Eve Cole Время обновления：2025-01-28 04:00:02

1. Функции InsertRow() и InsertCell()

Функция InsertRow() может принимать параметры в следующей форме:

InsertRow(index): индекс начинается с 0

Эта функция добавляет новую строку перед строкой индекса, например, InsertRow(0), которая добавляет новую строку перед первой строкой. Функция InsertRow() по умолчанию эквивалентна функции InsertRow(-1), которая добавляет новую строку в конец таблицы. Обычно, когда мы его используем: objTable.insertRow(objTable.rows.length), это означает добавление новой строки в конец таблицы objTable.

Использование метода InsertCell() и InsertRow одинаково и здесь не будет обсуждаться.

2. Методы deleteRow() и deleteCell().

Функция deleteRow() может принимать параметры, форма следующая: deleteRow(index): индекс начинается с 0.

Тот же смысл, что и два вышеуказанных метода, заключается в удалении строк и ячеек в указанной позиции. Передаваемые параметры: Индекс — это позиция строки в таблице. Его можно получить следующим методом, а затем удалить:

Скопируйте код кода следующим образом:

var row=document.getElementById("Идентификатор строки");

var index=row.rowIndex;//Есть этот атрибут, хе-хе

objTable.deleteRow(индекс);

Позвольте мне рассказать вам о проблеме, с которой я столкнулся во время использования. При удалении строк в таблице, если вы удалите определенную строку, количество строк в таблице немедленно изменится. Поэтому, если вы хотите удалить все строки в таблице, следующий код неверен:

Скопируйте код кода следующим образом:

функция ClearRow(){

objTable= document.getElementById("myTable");

for(var i=1; i<objTable.rows.length; i++)

{

tblObj.deleteRow(я);

}

Этот код хочет удалить тело исходной таблицы. Возникают две проблемы. Прежде всего, это не может быть deleteRow(i), это должен быть deleteRow(1). Потому что при удалении строк таблицы количество строк в таблице меняется. Это ключ к проблеме. Длина строк всегда становится меньше, а количество удаленных строк всегда меньше половины ожидаемого. удалите таблицу правильно. Строка кода должна выглядеть так:

Скопируйте код кода следующим образом:

функция ClearRow(){

objTable= document.getElementById("myTable");

вар длина = objTable.rows.length;

for(var i=1; i<длина; я++)

{

objTable.deleteRow(я);

}

3. Динамически задавайте свойства ячеек и строк.

А. Используйте метод setAttribute() следующего формата: setAttribute(атрибут, значение атрибута)

Примечание. Этот метод можно использовать практически для всех объектов DOM. Первый параметр — это имя атрибута, например: border, а второй параметр — это значение, которое вы хотите установить для границы, например: 1.

Скопируйте код кода следующим образом:

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border",1);//Установим границу таблицы на 1

В других случаях, например, если вы хотите установить высоту TD, вам также необходимо сначала получить объект TD, а затем использовать метод setAttribute().

Скопируйте код кода следующим образом:

var objCell = document.getElementById("myCell");

objCell.setAttribute("height",24);//Устанавливаем высоту ячейки 24

При его использовании я столкнулся с проблемой установки стилей. Вместо этого вы не можете использовать setAttribute("class","inputbox2"); вам следует использовать setAttribute("className","inputbox2"). Думаю, у других такая же проблема. , некоторые атрибуты не соответствуют тому, что есть в DW, ха-ха, давайте разберемся сами.

Б. Прямое назначение

Скопируйте код кода следующим образом:

var objMyTable = document.getElementById("myTable");

objMyTable.border=1;//Установим границу таблицы на 1

Этот метод также применим ко всем, ха-ха.

4. Создайте таблицу

Как только вы поймете, как добавлять и удалять строки <tr> и ячейки <td>, вы сможете создать таблицу.

Шаг 1. Вам нужна таблица, которую вы хотите динамически изменять. Я говорю о таблице, которая уже существует на странице. Нам нужно установить идентификатор: myTable.

Скопируйте код кода следующим образом:

var objMyTable = document.getElementById("myTable");

Шаг 2. Создайте объекты строк и столбцов.

Скопируйте код кода следующим образом:

индекс вар = objMyTable.rows.length-1;

var nextRow = objMyTable.insertRow(index);//Добавляемые строки добавляются со второй по последнюю строку.

//Номер сотового ящика

вар newCellCartonNo = nextRow.insertCell();

var cartonNoName = "IptCartonNo";

newCellCartonNo.innerHTML = "<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

newCellCartonNo.setAttribute("имякласса","tablerdd");

Вот и все, можно просто создать строку и столбец. Я разместил конкретный код ниже. Это очень простой пример, но метод, вероятно, тот же, что и выше. Ха-ха, давайте разберемся потихоньку~.

Скопируйте код кода следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<голова>

<title>Blu-ray-BlueShine</title>

вар Count = ложь, НЕТ = 1;

функция addRow(){

Счет=!Счет;

//Добавляем строку

вар newTr = testTbl.insertRow(testTbl.rows.length);

//Добавляем два столбца

вар newTd0 = newTr.insertCell();

вар newTd1 = newTr.insertCell();

вар newTd2 = newTr.insertCell();

//Устанавливаем содержимое и атрибуты столбца

if(Count){newTr.style.background="#FFE1FF";}

еще {newTr.style.background="#FFEFD5";}

newTd0.innerHTML = '<input type=checkbox id="box4">';

НЕТ++

newTd1.innerText="Строка "+ НЕТ+";

}

</скрипт>

</голова>

<тело>

<td>Строка 1</td>

<тд> </тд>

</tr>

</таблица>

<метка>

</метка>

</тело>

</html>

5. метод AppendChild()

Скопируйте код кода следующим образом:

<html>

<голова>

<title>Моя тестовая страница</title>

<тип сценария="текст/javascript">

<!--

вар textNumber = 1;

функция addTextBox(form, afterElement) {

// Увеличиваем номер текстового поля

текстНомер++;

//Создаем метку

var label = document.createElement("label");

//Создаем текстовое поле

var textField = document.createElement("вход");

textField.setAttribute("тип","текст");

textField.setAttribute("имя","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// Добавляем текст метки

label.appendChild(document.createTextNode("Текстовое поле #"+textNumber+": "));

// Помещаем текстовое поле внутрь

label.appendChild(textField);

// Добавляем все это в форму

form.insertBefore(метка,afterElement);

вернуть ложь;

}

функция RemoveTextBox(форма) {

if (textNumber > 1) { // Если имеется более одного текстового поля

// Удаляем последнее добавленное

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

номер текста--;

}

//-->

</скрипт>

<!--

этикетка {

дисплей: блок;

маржа: .25em 0em;

}

-->

</стиль>

</голова>

<тело>

<label>Текстовое поле №1: <input type="text" name="txt1" id="txt1" /></label>

<р>

</p>

</форма>

</тело>

</html>

<html>

<голова>

<title>Моя тестовая страница</title>

<тип сценария="текст/javascript">

<!--

вар textNumber = 1;

функция addTextBox(form, afterElement) {

// Увеличиваем номер текстового поля

текстНомер++;

//Создаем метку

var label = document.createElement("label");

//Создаем текстовое поле

var textField = document.createElement("вход");

textField.setAttribute("тип","текст");

textField.setAttribute("имя","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// Добавляем текст метки

label.appendChild(document.createTextNode("Текстовое поле #"+textNumber+": "));

// Помещаем текстовое поле внутрь

label.appendChild(textField);

// Добавляем все это в форму

form.insertBefore(метка,afterElement);

вернуть ложь;

}

функция RemoveTextBox(форма) {

if (textNumber > 1) { // Если имеется более одного текстового поля

// Удаляем последнее добавленное

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

номер текста--;

}

//-->

</скрипт>

<!--

этикетка {

дисплей: блок;

маржа: .25em 0em;

}

-->

</стиль>

</голова>

<тело>

<label>Текстовое поле №1: <input type="text" name="txt1" id="txt1" /></label>

<р>

</p>

</форма>

</тело>

</html>