>

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>

Справочник JavaScript