TableHead и TableDate

Объекты TableHead и TableDate представляет собой HTML элементы <th> и <td> соответственно.

Свойства объектов TableHead и TableDate

abbr	Устанавливает или возвращает значение атрибута `abbr`
cellIndex	Возвращает положение ячейки в строке таблицы
colSpan	Устанавливает или возвращает значение атрибута `colspan`
headers	Устанавливает или возвращает значение атрибутов `headers`
rowSpan	Устанавливает или возвращает значение атрибута `rowspan`

abbr

Свойство abbr устанавливает или возвращает значение атрибута abbr.

Синтаксис

thttdObject [ = text ]

text - краткое описание содержимого заголовка ячейки

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

Строка, представляющая краткое описание содержимого заголовка ячейки

cellIndex

Свойство cellIndex возвращает позицию ячейки в строке таблицы.

Синтаксис

thtdObject.cellIndex

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

Количество, представляющее позицию ячейки в строке таблицы

Пример

<style>
table, td { border: 1px solid black;}
td {cursor: pointer; color: blue; padding: 5px;}
td:hover { color: red; }
</style>
<table><tr>
 <td onclick="myFunction(this)"> Узнать cellIndex </td>
 <td onclick="myFunction(this)"> Узнать cellIndex </td>
 <td onclick="myFunction(this)"> Узнать cellIndex </td>
 <td onclick="myFunction(this)"> Узнать cellIndex </td>
</tr></table>
<script>
function myFunction(x) { Alert("CellIndex: " + x.cellIndex); }
</script>

colSpan

Свойство colSpan устанавливает или возвращает значение атрибута colspan

Синтаксис

thtdObject.colSpan = number

number - количество ячеек, которые должны быть объединены по горизонтали.

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

Количество ячеек, которые объединены по горизонтали.

Пример

<style>
table, td { border: 1px solid black; }
td {padding: 12px;}
</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)">Объединить  ячейки в первой строке</button><br><br>
<script>
function myFunction() {
 var table = document.getElementById("myTable");
 var row = table.rows[0];
 var cells = row.cells;
 if (cells[0].colSpan != 2) {
   cells[0].innerHTML = 'row 1 cell 1-2';
   row.deleteCell(1);  cells[0].colSpan=2; } 
 }
</script>

headers

Свойство headers устанавливает или возвращает значение атрибутов headers.

Синтаксис

thtdObject.headers = str_headers

str_headers - один или несколько идентификаторов, разделенных между собой пробелом.

Пример

<style>
table, td, th { border: 1px solid black; }
td, th {padding: 12px;}
</style>
<table id="myTable"><tr>
 <th id="name">Имя</td>
 <th id="surname">Фамилия</td>
 <th id="tel">Телефон</td>
 <th id="address">Адрес</td>
 <th id="num">Номер комнаты</td>
</tr><tr>
 <td headers="name">Иван</td>
 <td headers="surname">Пырьев</td>
 <td headers="tel">555-94-32-95</td>
 <td headers="address">Улица Ассинизаторов, 69</td>
 <td headers="num">908Б</td>
</tr></table><br>
<button onclick="myFunction()">Получить все headers</button>
<p id="demo"></p>
<script>
function myFunction() { var txt = "";
    var table = document.getElementById("myTable");    
    for (var i = 0; i < table.rows[1].cells.length; i++) {
        txt = txt + table.rows[1].cells[i].headers + "<br>";  }
    document.getElementById("demo").innerHTML = txt; }
</script>

rowSpan

Свойство rowSpan устанавливает или возвращает значение атрибута rowspan.

Синтаксис

thtdObject.rowSpan [ = number ]

number - количество ячеек, которые должны быть объединены по вертикали.

Пример

<style>
table, td { border: 1px solid black; }
td {padding: 12px;}
</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)">Объединить  ячейки в первом столбце</button><br><br>
<script>
function myFunction() {
 var table = document.getElementById("myTable");
 var row = table.rows;
 if (row[0].cells[0].rowSpan == 3) return;
 row[0].cells[0].innerHTML = 'row 1-3 cell 1';
 row[2].deleteCell(0); row[1].deleteCell(0);
 row[0].cells[0].rowSpan=3; }
</script>