DOM操作表格

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script>
function show(){
var mtb = document.getElementById('tb');
var mrow = document.getElementById('row').value;
var mcel = document.getElementById('cel').value;
var mcourse = document.getElementById('course').value;
mtb.rows[mrow-1].cells[mcel-1].innerHTML = mcourse;
}
</script>
</head>

<body>
<table id="tb" border="1">
<caption>Name</caption>
<tr>
<td>A</td>
<td>18</td>
</tr>
<tr>
<td>B</td>
<td>19</td>
</tr>
<tr>
<td>C</td>
<td>20</td>
</tr>
</table>
<hr />

<button value="1" onclick="alert(document.getElementById('tb').caption.innerHTML);">Caption</button><br />
<button value="2" onclick="alert(document.getElementById('tb').rows[0].cells[0].innerHTML);">第一行第一列</button><br />
<button value="3" onclick="alert(document.getElementById('tb').rows[1].cells[1].innerHTML);">第二行第二列</button><br />
<button value="4" onclick="alert(document.getElementById('tb').rows[2].cells[1].innerHTML);">第三行第二列</button><br />
<hr />

<input type="text" id="row" size="2"/><br />
<input type="text" id="cel" size="2"/><br />
<input type="text" id="course" size="10"/><br />
<button value="modify" id="btn" onclick="show()">Modify</button>
<hr />
</body>

</html>

posted @ 2017-07-26 11:22  梁大爷  阅读(115)  评论(0编辑  收藏  举报