Javascript Reference - HTML DOM TableRow Object

The TableRow object represents an HTML <tr> element.

Example

We can access a <tr> element by using getElementById().


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {<!--from   ww w  .j  av a 2s  .  c o m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr id="myRow">
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var row = document.getElementById("myRow");
    row.deleteCell(0);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

We can create a <tr> element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!-- ww w.j a  v  a 2 s .  com-->
    border: 1px solid black;
}
</style>
</head>
<body>

<table id="myTable">
</table>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var x = document.createElement("TR");
    x.setAttribute("id", "myTr");
    document.getElementById("myTable").appendChild(x);

    var y = document.createElement("TD");
    var t = document.createTextNode("new cell");
    y.appendChild(t);
    document.getElementById("myTr").appendChild(y);
}
</script>

</body>
</html>

The code above is rendered as follows:

TableRow Object Collections

Collection	Description
cells	Returns a list of all <td> or <th> elements in a table row

TableRow Object Properties

Property	Description
align	Not supported in HTML5. Use style.textAlign instead. Sets or gets the horizontal alignment within a table row
bgColor	Not supported in HTML5. Use style.backgroundColor instead. Sets or gets the background color of a table row
height	Not supported in HTML5. Use style.height instead. Sets or gets the height of a table row.
rowIndex	Returns the position of a row in the rows collection of a table
sectionRowIndex	Returns the position of a row in the rows collection of a tbody, thead, or tfoot
vAlign	Not supported in HTML5. Use style.verticalAlign instead. Sets or gets the vertical alignment within a table row

TableRow Object Methods

Method	Description
deleteCell()	Deletes a cell from the current table row
insertCell()	Inserts a cell into the current table row

Standard Properties and Events

The TableRow object supports the standard properties and events.