<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="mytabletest.css" type="text/css">
<script language="javascript" type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function addHero() {
var z;
var i=$("ph").value;
for (var j=1;j<$("mytable").rows.length;j++) {
if(parseInt(i)>=parseInt($("mytable").rows[j].cells[0].getElementsByTagName("input")[0].value))
{
z=j;
}
}
var tableRow=$("mytable").insertRow(z+1);
var Cell_0=tableRow.insertCell(0);
Cell_0.innerHTML='<input value="'+$("ph").value+'" readonly="true"/>';
Cell_0.className="s1";
var Cell_1=tableRow.insertCell(1);
Cell_1.innerHTML='<input value="'+$("xm").value+'" readonly="true"/>';
Cell_1.className="s2";
var Cell_2=tableRow.insertCell(2);
Cell_2.innerHTML='<input value="'+$("ch").value+'" readonly="true"/>';
Cell_2.className="s3";
var Cell_3=tableRow.insertCell(3);
Cell_3.innerHTML="<a href='#' onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>刪除</a>";
Cell_3.className="s4";
var Cell_4=tableRow.insertCell(4);
Cell_4.innerHTML="<a href='#' onclick='edit(this.parentNode.parentNode)' class='edit'>修改</a>";
Cell_4.className="s5";
}
function Del(obj,val) {
var a=window.confirm("您確定要刪除嗎？");
if(a) {
$("mytable").deleteRow(val);
} else {
window.alert("未刪除！");
}
}
function edit(obj) {
var inp = obj.getElementsByTagName("input");
for (var i=0,len=inp.length;i<len;i++)
{
inp[i].readOnly=false;
}
}
</script>
</head>
<body>
<h1>梁山英雄排行榜</h1>
<table id="mytable" cellspacing="0px" border="3" bordercolor="red">
<tr>
<td class="s_top">排行</td>
<td class="s_top">姓名</td>
<td class="s_top">綽號</td>
<td class="s_top" colspan="2">操作</td>
</tr>
<tr>
<td class="s1"><input value="1" readonly="true"/></td>
<td class="s2"><input value="宋江" readonly="true"/></td>
<td class="s3"><input value="呼保義" readonly="true"/></td>
<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>刪除</a></td>
<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
</tr>
<tr>
<td class="s1"><input value="2" readonly="true"/></td>
<td class="s2"><input value="盧俊義" readonly="true"/></td>
<td class="s3"><input value="玉麒麟" readonly="true"/></td>
<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>刪除</a></td>
<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
</tr>
<tr>
<td class="s1"><input value="3" readonly="true"/></td>
<td class="s2"><input value="吳用" readonly="true"/></td>
<td class="s3"><input value="智多星" readonly="true"/></td>
<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>刪除</a></td>
<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
</tr>
</table>
<span class="span1">排行</span><input id="ph" type="text"/>
<br>
<span class="span1">姓名</span><input id="xm" type="text"/>
<br>
<span class="span1">綽號</span><input id="ch" type="text"/>
<br>
<input class="but" type="button" value="添加英雄" onclick="addHero()"/>
</body>
</html>
另外一種:
步驟：
1、獲取表格的dom節點
2、通過rows和cells定位td單元格
3、通過修改innerHTML
示例代碼
<body>
<table id='test'> //定義一個table
<tr>
<td></td><td></td>
</tr>
</table>
<script>
var tb = document.getElementById('test');//獲取表格的dom節點
var td = tb.rows[0].cells[0];//獲取0行0列的td單元格
td.innerHTML = '222';//動態修改表格的內容為222
</script>
</body>