概述:
此文件叙述了如何动态查找和修改表格内的内容,或许对您有所帮助.
代码详情:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="卡布奇诺奶茶的独特">
<meta name="Keywords" content="表格控件,查找表格内容,修改表格内容,">
<meta name="Description" content="此文件叙述了如何动态查找和修改表格内的内容,或许对您有所帮助.">
<title>查找表格内部元素及对其内容动态修改【查找表格控件】</title>
</head>
<!--表格和DIV样式[css]-->
<style type="text/css">
#myTable{
width:65%;
border-collapse:collapse;
text-align:center;
margin:0 auto;
font-family:微软雅黑;
}
tr:nth-child(2n+1){
background:#F2F2F2;
}
#myDiv{
padding:0px 100px 0px 235px;
}
#myDiv01{
padding:0px 100px 0px 235px;
font-size:12px;
font-weight:bold;
}
</style>
<!--动态修改表格内容的相关函数[JS]-->
<script type="text/javascript" language="javascript">
function updateContent(){
var row = document.getElementById("row").value;
var cell = document.getElementById("cel").value;
var t = document.getElementById("myTable");
//t.rows[row-1].cells[cell-1].innerHTML = document.getElementById("source").value;
/*亦可此种写法*/
t.rows.item(row-1).cells.item(cell-1).innerHTML = document.getElementById("source").value;
}
</script>
<body>
<!--ele start-->
<table id="myTable" border="1">
<caption>英文字母表</caption>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
<tr>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
<tr>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>P</td>
<td>Q</td>
<td>R</td>
</tr>
</table>
<!--ele end-->
<hr/>
<!--ele start-->
<div id="myDiv">
<input type="button" value="获取标题"
οnclick="alert(document.getElementById('myTable').caption.innerHTML);"/>
<input type="button" value="第一行第一格"
οnclick="alert(document.getElementById('myTable').rows[0].cells[0].innerHTML);"/>
<input type="button" value="第二行第二格"
οnclick="alert(document.getElementById('myTable').rows[1].cells[1].innerHTML);"/>
<input type="button" value="第三行第二格"
οnclick="alert(document.getElementById('myTable').rows[2].cells[1].innerHTML);"/>
</div>
<!--ele end-->
<hr/>
<!--ele start-->
<div id="myDiv01">
设置第<input type="text" id="row" size="2"/>行,第<input type="text" id="cel" size="2"/>列
的值为:<input type="text" id="source" size="10"/> <input type="button" value="确认修改" οnclick="updateContent()"/>
</div>
<!--ele end-->
</body>
</html>
Web截图:
-----------------------------------------------------
感谢您的倾心阅读