метод вставкиРов()
Определение и использование
Метод InsertRow() используется для вставки новой строки в указанную позицию таблицы.
грамматика
tableObject.insertRow(индекс)
возвращаемое значение
Возвращает TableRow, представляющий вновь вставленную строку.
иллюстрировать
Этот метод создает новый объект TableRow, представляющий новый тег <tr>, и вставляет его в таблицу в указанную позицию.
Новая строка будет вставлена перед строкой по индексу. Если индекс равен количеству строк в таблице, новая строка будет добавлена в конец таблицы.
Если таблица пуста, новая строка будет вставлена в новый раздел <tbody>, который сам будет вставлен в таблицу.
Бросать
Если индекс параметра меньше 0 или больше или равен количеству строк в таблице, этот метод выдаст исключение DOMException с кодом INDEX_SIZE_ERR.
пример
Скопируйте код кода следующим образом:
<html>
<голова>
<тип сценария="текст/javascript">
функция insRow()
{
document.getElementById('myTable').insertRow(0)
}
</скрипт>
</голова>
<тело>
<table id="myTable">
<тр>
<td>Строка1 ячейка1</td>
<td>Строка1, ячейка2</td>
</tr>
<тр>
<td>Строка2, ячейка1</td>
<td>Строка2 ячейка2</td>
</tr>
</таблица>
<br />
<input type="button" onclick="insRow()"
value="Вставить новую строку">
</тело>
</html>
deleteCell()
Определение и использование
Метод deleteCell() используется для удаления ячейки (элемента <td>) в строке таблицы.
грамматика
tablerowObject.deleteCell(индекс)
иллюстрировать
Индекс параметра — это позиция в строке удаляемого элемента таблицы.
Этот метод удалит элемент таблицы в указанной позиции в строке таблицы.
Бросать
Если индекс параметра меньше 0 или больше или равен количеству элементов таблицы в строке, этот метод выдаст исключение DOMException с кодом INDEX_SIZE_ERR.
пример
Скопируйте код кода следующим образом:
<html>
<голова>
<тип сценария="текст/javascript">
функцияdelRow()
{
document.getElementById('myTable').deleteRow(0)
}
</скрипт>
</голова>
<тело>
<table id="myTable">
<тр>
<td>Строка1 ячейка1</td>
<td>Строка1, ячейка2</td>
</tr>
<тр>
<td>Строка2, ячейка1</td>
<td>Строка2 ячейка2</td>
</tr>
</таблица>
<br />
<input type="button" onclick="delRow()"
value="Удалить первую строку">
</тело>
</html>
вставитьСелл()
Определение и использование
Метод InsertCell() используется для вставки пустого элемента <td> в указанную позицию в строке таблицы HTML.
грамматика
tablerowObject.insertCell(индекс)
возвращаемое значение
Объект TableCell, представляющий вновь созданный и вставленный элемент <td>.
иллюстрировать
Этот метод создает новый элемент <td> и вставляет его в строку в указанной позиции. Новая ячейка будет вставлена перед ячейкой, расположенной в данный момент в позиции, указанной индексом. Если индекс равен количеству ячеек в строке, новая ячейка добавляется в конец строки.
Обратите внимание, что этот метод может вставлять только элементы таблицы данных <td>. Если вам нужно добавить элемент заголовка в строку, вы должны создать и вставить элемент <th> с помощью метода Document.createElement() и метода Node.insertBefore() (или связанных методов).
Бросать
Если индекс параметра меньше 0 или больше или равен количеству элементов таблицы в строке, этот метод выдаст исключение DOMException с кодом INDEX_SIZE_ERR.
пример
Скопируйте код кода следующим образом:
<html>
<голова>
<тип сценария="текст/javascript">
функция insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="Джон"
}
</скрипт>
</голова>
<тело>
<таблица>
<tr id="tr1">
<th>Имя</th>
<th>Фамилия</th>
</tr>
<tr id="tr2">
<td>Питер</td>
<td>Гриффин</td>
</tr>
</таблица>
<br />
<input type="button" onclick="insCell()" value="Вставить ячейку">
</тело>
</html>
deleteCell()
Определение и использование
Метод deleteCell() используется для удаления ячейки (элемента <td>) в строке таблицы.
грамматика
tablerowObject.deleteCell(индекс)
иллюстрировать
Индекс параметра — это позиция в строке удаляемого элемента таблицы.
Этот метод удалит элемент таблицы в указанной позиции в строке таблицы.
Бросать
Если индекс параметра меньше 0 или больше или равен количеству элементов таблицы в строке, этот метод выдаст исключение DOMException с кодом INDEX_SIZE_ERR.
пример
Скопируйте код кода следующим образом:
<html>
<голова>
<тип сценария="текст/javascript">
функцияdelCell()
{
document.getElementById('tr2').deleteCell(0)
}
</скрипт>
</голова>
<тело>
<таблица>
<tr id="tr1">
<th>Имя</th>
<th>Фамилия</th>
</tr>
<tr id="tr2">
<td>Питер</td>
<td>Гриффин</td>
</tr>
</таблица>
<br />
<input type="button" onclick="delCell()" value="Удалить ячейку">
</тело>
</html>
Приложения в проекте:
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
вартрИндекс = 0;
//Динамически добавляем строки
функция addConvert(){
//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];
вар имя класса;
если (ноль! = выбор) {
for(var я = 0; я <sel.options.length; я++){
если (sel.options[i].selected)
className=sel.options[i].value;
}
}
//Данные поступают из формата ajax, json.
Convert.getConvertBean2Json(имякласса,
функция(результат) {
var obj = eval('('+result+')');
var table = document.getElementById("convertTable");
вар newRow = table.insertRow(trIndex+1);
newRow.insertCell(0).innerHTML = obj.name+"<input type='button' value='Delete' onclick='deleteRow(this)'>";
newRow.insertCell(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name ' value=""+obj.name+"'>";
если (нуль! = obj.paramList) {
вар paramStr = "";
for(var я = 0; я <obj.paramList.length; я++){
параметрStr = параметрStr+
"Имя параметра:"+obj.paramList[i].name+
";Тип параметра:"+obj.paramList[i].type+
"; Значение параметра: <input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
}
newRow.insertCell(2).innerHTML = paramStr;
}
трииндекс++;
});
}
//удаляем строку
при deleteRow(r){
вар я = r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
трииндекс--;
}
</скрипт>