JavaScript DHTML/Table/Cell
Содержание
Delete a Cell
<html>
<body>
<script language="JavaScript">
function function1() {
document.all.myTr.deleteCell(2);
}
</script>
<table>
<tr id="myTr">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<input type="button" value="Remove Cell 3" onclick="function1();">
</body>
</html>
Inserrt a table cell
<html>
<head>
<title>Build-o-Table</title>
<script type="text/javascript">
function procImage() {
var tbl = document.getElementById("table1");
tbl.border="5px";
tbl.cellPadding="5px";
var row1 = tbl.insertRow(-1);
var cell1 = row1.insertCell(0);
var cell2 = row1.insertCell(1);
var txtAttr1 = document.createTextNode("src");
cell1.appendChild(txtAttr1);
}
</script>
<body onload="procImage();">
<table id="table1">
<tr><td>adsf</td></tr>
</table>
</body>
</html>
Insert Cell Example
<html>
<body>
<script language="JavaScript">
function function1() {
var myRow = document.all.myTable.insertRow();
var myCell = myRow.insertCell();
myCell.innerText = "The added cell";
}
</script>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<td width="100">1 </td>
<td width="100">2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</table>
<button onclick="function1();">Add a cell</button>
</body>
</html>
Table Cell background Color Example
<html>
<head>
<script>
function function1() {
document.all.myTD.bgColor = "red";
}
function function2() {
document.all.myTD.bgColor = "";
}
</script>
</head>
<body bgcolor="#ccffcc" text="#000000">
<table>
<tr>
<td id="myTD" height="79">Cell 1 content</td>
<td height="79">Cell 2 content</td>
</tr>
</table>
<input type="button" value="Add background color to Cell 1" onClick="function1();">
<input type="button" value="Remove background colors" onClick="function2();">
</body>
</html>
Table Cell "background" Example
<html>
<head>
<script>
function function1() {
document.all.myTD.background = "http://www.wbex.ru/style/logo.png";
}
function function2() {
document.all.myTD.background = "";
}
</script>
</head>
<body bgcolor="white" text="white">
<table>
<tr>
<td id="myTD" height="79" bgcolor="green">Cell 1 content</td>
<td height="79">Cell 2 content</td>
<td height="79">Cell 3 content</td>
</tr>
</table>
<input type="button" name="button2" value="Add background image to Cell 1" onClick="function1();">
<input type="button" name="button3" value="Remove background image" onClick="function2();">
</body>
</html>
Table cell Index Example
<html>
<body>
Click in any cell to view the cellIndex value.
<table id="myTable" cols="3">
<tr>
<th id="th1" onclick="function1(this);">Header 1</th>
<th id="th2" onclick="function1(this);">Header 2</th>
<th id="th3" onclick="function1(this);">Header 3</th>
</tr>
<tr>
<td id="td1" onclick="function1(this);">Cell 1</td>
<td id="td2" onclick="function1(this);">Cell 2</td>
<td id="td3" onclick="function1(this);">Cell 3</td>
</tr>
</table>
<br>
<button onclick="alert(myTable.cellPadding);">Cell Padding</button>
<button onclick="alert(myTable.cellSpacing);">Cell Spacing</button>
<button onclick="alert(myTable.cols);">cols</button>
<script language="JavaScript">
function function1(elem) {
alert("Cell Index :"+ elem.cellIndex);
}
</script>
</body>
</html>
Table "cellPadding" Example
<html>
<body>
Click in any cell to view the cellIndex value.
<table id="myTable" cols="3">
<tr>
<th id="th1" onclick="function1(this);">Header 1</th>
<th id="th2" onclick="function1(this);">Header 2</th>
<th id="th3" onclick="function1(this);">Header 3</th>
</tr>
<tr>
<td id="td1" onclick="function1(this);">Cell 1</td>
<td id="td2" onclick="function1(this);">Cell 2</td>
<td id="td3" onclick="function1(this);">Cell 3</td>
</tr>
</table>
<br>
<button onclick="alert(myTable.cellPadding);">Cell Padding</button>
<button onclick="alert(myTable.cellSpacing);">Cell Spacing</button>
<button onclick="alert(myTable.cols);">cols</button>
<script language="JavaScript">
function function1(elem) {
alert("Cell Index :"+ elem.cellIndex);
}
</script>
</body>
</html>
Table cell Spacing Example
<html>
<body>
Click in any cell to view the cellIndex value.
<table id="myTable" cols="3">
<tr>
<th id="th1" onclick="function1(this);">Header 1</th>
<th id="th2" onclick="function1(this);">Header 2</th>
<th id="th3" onclick="function1(this);">Header 3</th>
</tr>
<tr>
<td id="td1" onclick="function1(this);">Cell 1</td>
<td id="td2" onclick="function1(this);">Cell 2</td>
<td id="td3" onclick="function1(this);">Cell 3</td>
</tr>
</table>
<br>
<button onclick="alert(myTable.cellPadding);">Cell Padding</button>
<button onclick="alert(myTable.cellSpacing);">Cell Spacing</button>
<button onclick="alert(myTable.cols);">cols</button>
<script language="JavaScript">
function function1(elem) {
alert("Cell Index :"+ elem.cellIndex);
}
</script>
</body>
</html>