The TableData object represents an HTML <td> element.
We can access a <td> element by using getElementById().
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {<!--from w w w . j a va2 s . co m-->
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td id="myTd">Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myTd");
x.innerHTML = "NEW CELL CONTENT";
}
</script>
</body>
</html>
The code above is rendered as follows:
We can create a <td> element by using the document.createElement() method.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {<!--from w w w. j av a 2 s . c o m-->
border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<tr id="myTr">
</tr>
</table>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
var x = document.createElement("TD");
var t = document.createTextNode("new cell");
x.appendChild(t);
document.getElementById("myTr").appendChild(x);
}
</script>
</body>
</html>
The code above is rendered as follows:
| Property | Description |
|---|---|
| abbr | Not supported in HTML5. Sets or gets the value of the abbr attribute |
| align | Not supported in HTML5.
Use style.textAlign instead. Sets or gets the horizontal alignment of the content in a data cell |
| axis | Not supported in HTML5. Sets or gets a comma-separated list of related data cells |
| background | Not supported in HTML5.
Use style.background instead. Sets or gets the background image of a data cell |
| bgColor | Not supported in HTML5.
Use style.backgroundColor instead. Sets or gets the background color of a table |
| cellIndex | Returns the position of a cell in the cells collection of a table row |
| ch | Not supported in HTML5. Sets or gets an alignment character for a data cell |
| chOff | Not supported in HTML5. Sets or gets the horizontal offset of the ch property |
| colSpan | Sets or gets the value of the colspan attribute |
| headers | Sets or gets the value of the headers attribute |
| height | Not supported in HTML5.
Use style.height instead. Sets or gets the height of a data cell |
| noWrap | Not supported in HTML5.
Use style.whiteSpace instead. Sets or gets whether the content in a cell can be wrapped |
| rowSpan | Sets or gets the value of the rowspan attribute |
| vAlign | Not supported in HTML5.
Use style.verticalAlign instead. Sets or gets the vertical alignment of the content within a cell |
| width | Not supported in HTML5.
Use style.width instead. Sets or gets the width of a data cell |
The TableData object supports the standard properties and events.