Table

Объект Table представляет собой HTML элемент <table>.

Свойства объекта Table

caption Возвращает <caption> элемент таблицы
rows Возвращает коллекцию всех <tr> элементов в таблице
tBodies Возвращает коллекцию всех <tbody> элементов в таблице
tFoot Возвращает ссылку на <tfoot> элемент таблицы
tHead Возвращает ссылку на <thead> элемент таблицы

Методы объекта Table

createCaption() Создает пустой <caption> элемент и добавляет его к таблице
createTFoot() Создает пустой <tfoot> элемент и добавляет его к таблице
createTHead() Создает пустой <thead> элемент и добавляет его к таблице
deleteCaption() Удаляет <caption> элемент из таблицы
deleteRow() Удаляет строку (<tr>) из таблицы
deleteTFoot() Удаляет <tfoot> элемент из таблицы
deleteTHead() Удаляет <thead> элемент из таблицы
insertRow() Создает пустой <tr> элемент и добавляет его к таблице

caption

Свойство caption возвращает <caption> элемент таблицы.

Синтаксис

tableObject.caption

Возвращаемое значение

<caption> элемент таблицы, или нулевое значение , если он не определен

Пример

<style>
table, td { border: 1px solid black; }
td {padding: 12px;}
em {font-size: 20px; color: #773311; font-weight: 500;}
</style>
<table id="myTable">
<caption>Это есть <em>caption</em></caption>
<tr><td> cell 1 </td><td> cell 2 </td></tr>
<tr><td> cell 3 </td><td> cell 4 </td></tr>
</table>
<button onclick="myFunction()">Узнать <b>caption</b></button><br>
<p id="demo"></p>
<script>
function myFunction() {
 document.getElementById("demo").innerHTML = 
   document.getElementById("myTable").caption.innerHTML;
}
</script>

createCaption()

Метод createCaption создает пустой <caption> элемент и добавляет его к таблице

Синтаксис

tableObject.createCaption()

Возвращаемое значение

Вновь созданный <caption> элемент

Пример

<style>
table, td { border: 1px solid black; }
td {padding: 12px;}
em {font-size: 20px; color: #773311; font-weight: 500;}
</style>
<table id="myTable">
<tr><td> cell 1 </td><td> cell 2 </td></tr>
<tr><td> cell 3 </td><td> cell 4 </td></tr>
</table>
<button onclick="myFunction(1)">Создать <b>caption</b></button><br><br>
<button onclick="myFunction(0)">Удалить <b>caption</b></button>
<script>
function myFunction(n) {
 var table = document.getElementById("myTable");
 if (n==0) {table.deleteCaption(); return; }
 var c = table.createCaption();
 c.innerHTML = "Это есть <em>caption</em>"; }
</script>

createTFoot()

Метод createTFoot создает пустой <tfoot> элемент и добавляет его к таблице

Синтаксис

tableObject.createTFoot()

Возвращаемое значение

Вновь созданный <tfoot> элемент

Пример

<style>
table, td { border: 1px solid black; }
td {padding: 12px;}
em {font-size: 20px; color: #773311; font-weight: 500;}
</style>
<table id="myTable">
<tr><td> cell 1 </td><td> cell 2 </td></tr>
<tr><td> cell 3 </td><td> cell 4 </td></tr>
</table>
<button onclick="myFunction(1)">Создать <b>TFOOT</b></button><br><br>
<button onclick="myFunction(0)">Удалить <b>TFOOT</b></button>
<script>
function myFunction(n) {
 var table = document.getElementById("myTable");
 if (n==0) {table.deleteTFoot(); return;}
 var footer = table.createTFoot();
 var row = footer.insertRow(0);
 var cell = row.insertCell(0);
 cell.innerHTML = "Это есть footer"; }
</script>

createTHead()

Метод createTHead метод создает пустой <thead> элемент и добавляет его к таблице.

Синтаксис

tableObject.createTHead()

Возвращаемое значение

Вновь созданный <thead> элемент

Пример

<style>
table, td { border: 1px solid black; }
td {padding: 12px;}
em {font-size: 20px; color: #773311; font-weight: 500;}
</style>
<table id="myTable">
<tr><td> cell 1 </td><td> cell 2 </td></tr>
<tr><td> cell 3 </td><td> cell 4 </td></tr>
</table>
<button onclick="myFunction(1)">Создать <b>THEAD</b></button><br><br>
<button onclick="myFunction(0)">Удалить <b>THEAD</b></button><br>
<script>
function myFunction(n) {
 var table = document.getElementById("myTable");
 if (n==0) {table.deleteTHead(); return; } 
 var head = table.createTHead();
 var row = head.insertRow(0);
 var cell = row.insertCell(0);
 cell.innerHTML = "Это есть head"; }
</script>

deleteCaption()

Метод deleteCaption удаляет <caption> элемент из таблицы.

Синтаксис

tableObject.deleteCaption()

Возвращаемое значение

Нет возвращаемого значения

Примеры

см. createCaption()

deleteRow()

Метод deleteRow удаляет строку с указанным индексом из таблицы.

Синтаксис

tableObject.deleteRow( index )

Параметры

index
Целое число, которое указывает положение строки для удаления (начинается с 0). Если index = -1, то будет удалена последняя строка.

Пример

<style>
table, td { border: 1px solid black; }
td {padding: 12px;}
em {font-size: 20px; color: #773311; font-weight: 500;}
</style>
<table id="myTable">
<tr><td> row 1 cell 1 </td><td> row 1 cell 2 </td></tr>
<tr><td> row 2 cell 1 </td><td> row 2 cell 2 </td></tr>
<tr><td> row 3 cell 1 </td><td> row 3 cell 2 </td></tr>
</table>
<button onclick="myFunction(1)">Вставить <b>TR</b></button><br><br>
<button onclick="myFunction(0)">Удалить <b>1-ю строку</b></button><br>
<script>
function myFunction(n) {
 var table = document.getElementById("myTable");
 if (n==0) {table.deleteRow(0); return; } 
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW row CELL 1";
    cell2.innerHTML = "NEW row CELL 2"; }
</script>

deleteTFoot()

Метод deleteTFoot удаляет <tfoot> элемент из таблицы.

Синтаксис

tableObject.deleteTFoot()

Возвращаемое значение

Нет возвращаемого значения

Примеры

см. createTFoot()

deleteTHead()

Метод deleteTHead удаляет <thead> элемент из таблицы.

Синтаксис

tableObject.deleteTHead()

Возвращаемое значение

Нет возвращаемого значения

Примеры

см. createTHead()

insertRow()

Метод insertRow создает пустой <tr> элемент и добавляет его к таблице.

Синтаксис

tableObject.insertRow( index )

Параметры

index
Число, которое указывает положение строки в таблице (начинается с 0). Если index = -1, то строка добавляется в конец таблицы.

Примеры

см. deleteRow()

rows

Свойство rows возвращает коллекцию всех <TR> элементов в таблице. Элементы коллекции сортируются , как они появляются в исходном коде.

Синтаксис

tableObject.rows

tableObject.rows.length      /* возвращает количество элементов в коллекции. */

tableObject.rows[index]      /* возвращает элемент с указанным индексом
                              или пустое значение , если индекс находится вне диапазона  */

tableObject.rows.item(index) /* возвращает  с указанным индексом
                              или пустое значение, если индекс находится вне диапазона */

tableObject.rows.namedItem(id) /* возвращает  с указанным идентификатором
                                или пустое значение,  если идентификатор не существует */

Возвращаемое значение

Коллекция (массив) всех <TR> элементов в таблице.

Пример

<style>
table, td { border: 1px solid black; }
td {padding: 12px;}
em {font-size: 20px; color: #773311; font-weight: 500;}
</style>
<table id="myTable">
<tr><td> cell 1 </td><td> cell 2 </td></tr>
<tr><td> cell 3 </td><td> cell 4 </td></tr>
<tr><td> cell 5 </td><td> cell 6 </td></tr>
</table>
<button onclick="myFunction()">
   Узнать количество TR-элементов в таблице.
</button><br>
<p id="demo"></p>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = '' + 
     document.getElementById("myTable").rows.length + ''; }
</script>

tBodies

Свойство rows возвращает коллекцию всех <TBODY> элементов в таблице. Элементы коллекции сортируются , как они появляются в исходном коде.

Синтаксис

tableObject.tBodies

tableObject.tBodies.length      /* возвращает количество элементов в коллекции. */

tableObject.tBodies[index]      /* возвращает элемент с указанным индексом
                              или пустое значение , если индекс находится вне диапазона  */

tableObject.tBodies.item(index) /* возвращает  с указанным индексом
                              или пустое значение, если индекс находится вне диапазона */

tableObject.tBodies.namedItem(id) /* возвращает  с указанным идентификатором
                                или пустое значение,  если идентификатор не существует */

Возвращаемое значение

Коллекция (массив) всех <TBODY> элементов в таблице.

Пример

<style>
table, td { border: 1px solid black; }
td {padding: 12px;}
em {font-size: 20px; color: #773311; font-weight: 500;}
</style>
<table id="myTable">
<tbody>
<tr><td> cell 1 </td><td> cell 2 </td></tr>
</tbody>
<tbody>
<tr><td> cell 3 </td><td> cell 4 </td></tr>
<tr><td> cell 5 </td><td> cell 6 </td></tr>
</table>
<button onclick="myFunction()">
   Узнать количество TBODY-элементов в таблице.
</button><br>
<p id="demo"></p>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = '' + 
     document.getElementById("myTable").tBodies.length + ''; }
</script>

tFoot

Свойство tFoot возвращает ссылку на <tfoot> элемент таблицы.

Синтаксис

tableObject.tFoot

Возвращаемое значение

Ссылка на <tfoot> элемент таблицы, или null , если он не определен

tHead

Свойство tHead возвращает ссылку на <thead> элемент таблицы.

Синтаксис

tableObject.tHead

Справочник JavaScript