- Операторы
- Управляющие инструкции
- JS Объекты
- браузер BOM
- HTML DOM
- События
- HTML Объекты
- Anchor
- Area
- Audio, Video
- Base
- Canvas
- Form
- IFrame
- Image
- Input
- Link
- Meta
- Option
- Progress
- Select
- Style
- Table
- Textarea
- TableHead и TableDate
- TableRow
- Промисы, async/await
- Сетевые запросы
- Бинарные данные и файлы
- Модули
- Классы
- Разное
TableRow
Объект TableRow представляет собой HTML элемент <tr>.
Свойства и Методы объекта TableRow
cells | Возвращает массив позволяющий обратится ко всем ячейкам строки. |
rowIndex | Позволяет узнать позицию данной строки в таблице. |
deleteCell() | Удаляет ячейку из таблицы |
insertCell() | Вставляет ячейку в таблицу. |
cells
Свойство cells возвращает коллекцию всех <td> или <th> элементов в строке таблицы.
Синтаксис
trObject.cells
trObject.cells.length /* возвращает количество элементов в коллекции. */ trObject.cells[index] /* возвращает элемент с указанным индексом или пустое значение , если индекс находится вне диапазона */ trObject.cells.item(index) /* возвращает с указанным индексом или пустое значение, если индекс находится вне диапазона */ trObject.cells.namedItem(id) /* возвращает с указанным идентификатором или пустое значение, если идентификатор не существует */
Возвращаемое значение
Объект HTMLCollection
, представляющий все <td> и/или <th> элементы в <tr> элементе. Элементы коллекции сортируются, как они появляются в исходном коде.
deleteCell()
Метод deleteCell метод удаляет ячейку в текущей строке таблицы.
Синтаксис
tablerowObject.deleteCell( index )
Параметры
- index
- Целое число (начинается с 0), которое указывает положение ячейки в текущей строке. Если
index
равен -1, то будет удалена последняя ячейка.
Возвращаемое значение
Нет возвращаемого значения.
Пример
insertCell()
Метод insertCell вставляет ячейку в текущей строке.
Синтаксис
trObject.insertCell( index )
Параметры
- index
- Целое число (начинается 0), которое определяет положение новой ячейки в текущей строке. Значение 0 результатов в том, что в новой ячейке будет вставлено в первом положении. Если
index
равен -1, то новая ячейка будет вставлена в последней позиции.
Возвращаемое значение
Нет возвращаемого значения.
Пример
<style> table, td, th { border: 1px solid black; } td, th {padding: 5px;} </style> <script> function newCell() { document.getElementsByTagName('tr')[1].insertCell(0); document.getElementsByTagName('tr')[1].cells[0].innerHTML='Я новая ячейка'; } function delCell() { document.getElementsByTagName('tr')[1].deleteCell(0); } </script> <table id="myTable"> <tr><th> Страна </th><th> Население (млн.) </th></tr> <tr><td abbr='es'>Испания</td><td>41</td></tr> <tr><td abbr='rus'>Россия</td><td>141</td></tr> </table><br /> <input type='button' value='Добавить ячейку' onclick='newCell()'/> <input type='button' value='Удалить ячейку' onclick='delCell()' /> <hr /> <script type='text/javascript'> document.write(document.getElementsByTagName('tr')[1].rowIndex + '<br />'); document.write(document.getElementsByTagName('tr')[2].rowIndex + '<br />'); </script>
rowIndex
Свойство rowIndex возвращает позицию строки в таблице.
Синтаксис
trObject.rowIndex
Возвращаемое значение
Число, представляющее позицию строки в коллекции строк таблицы