JavaScript简单表格编辑功能实现方法

前端技术 2023/09/09 JavaScript

本文实例讲述了JavaScript简单表格编辑功能实现方法。分享给大家供大家参考。具体如下：

<html>
<head>
<script type=\"text/javascript\">
function getInnerHTML()
{
alert(document.getElementById(\"tr2\").innerHTML);
}
 
function insCell()
{
 var x=document.getElementById(\'tr2\').insertCell(0)
 x.innerHTML=\"Table Row, Table Cell\"
}
 
function delCell()
{
 document.getElementById(\'tr2\').deleteCell(0)
}
 
function deleteCaption()
{
 document.getElementById(\'myTable\').deleteCaption()
}
 
function createCaption()
{
var x=document.getElementById(\'myTable\').createCaption()
x.innerHTML=\"My Table\"
}
 
function delRow()
{
document.getElementById(\'myTable\').deleteRow(0)
}
 
function insRow()
{
var x=document.getElementById(\'myTable\').insertRow(0);
var y=x.insertCell(0);
var z=x.insertCell(1);
y.innerHTML=\"New Cell 1\";
z.innerHTML=\"New Cell 2\";
}
</script>
</head>
<body>
<center><table id=\"myTable\" border=\"1\">
<tr id=\"tr2\">
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr id=\"tr2\">
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr id=\"tr2\">
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<center>
<table border=\"0\">
<tr><th colspan=\"2\">Table Controler</th></tr>
<tr><td>
<center>
<input type=\"button\" onclick=\"createCaption()\" 
value=\"Create caption\"></td><td>
<center>
<input type=\"button\" onclick=\"deleteCaption()\"
value=\"Delete caption\" />
</td></tr>
<tr><td colspan=\"2\">
<center>
<input type=\"button\" onclick=\"getInnerHTML()\"
value=\"Alert innerHTML of table row\" />
</td></tr>
<tr><td>
<center>
<input type=\"button\" onclick=\"insRow()\" 
value=\"Insert row\">
</td><td>
<center>
<input type=\"button\" onclick=\"delRow()\"
value=\"Delete first row\">
</td></tr>
<tr><td>
<center>
<input type=\"button\" onclick=\"insCell()\" 
value=\"Insert cell\">
</td><td>
<center>
<input type=\"button\" onclick=\"delCell()\" 
value=\"Delete cell\">
</td></tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/24369

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案