JavaScript简单表格编辑功能实现方法
本文实例讲述了JavaScript简单表格编辑功能实现方法。分享给大家供大家参考。具体如下:
<html>
<head>
<scripttype="text/javascript">
functiongetInnerHTML()
{
alert(document.getElementById("tr2").innerHTML);
}
functioninsCell()
{
varx=document.getElementById('tr2').insertCell(0)
x.innerHTML="TableRow,TableCell"
}
functiondelCell()
{
document.getElementById('tr2').deleteCell(0)
}
functiondeleteCaption()
{
document.getElementById('myTable').deleteCaption()
}
functioncreateCaption()
{
varx=document.getElementById('myTable').createCaption()
x.innerHTML="MyTable"
}
functiondelRow()
{
document.getElementById('myTable').deleteRow(0)
}
functioninsRow()
{
varx=document.getElementById('myTable').insertRow(0);
vary=x.insertCell(0);
varz=x.insertCell(1);
y.innerHTML="NewCell1";
z.innerHTML="NewCell2";
}
</script>
</head>
<body>
<center><tableid="myTable"border="1">
<trid="tr2">
<td>Row1cell1</td>
<td>Row1cell2</td>
</tr>
<trid="tr2">
<td>Row2cell1</td>
<td>Row2cell2</td>
</tr>
<trid="tr2">
<td>Row3cell1</td>
<td>Row3cell2</td>
</tr>
</table>
<br/>
<center>
<tableborder="0">
<tr><thcolspan="2">TableControler</th></tr>
<tr><td>
<center>
<inputtype="button"onclick="createCaption()"
value="Createcaption"></td><td>
<center>
<inputtype="button"onclick="deleteCaption()"
value="Deletecaption"/>
</td></tr>
<tr><tdcolspan="2">
<center>
<inputtype="button"onclick="getInnerHTML()"
value="AlertinnerHTMLoftablerow"/>
</td></tr>
<tr><td>
<center>
<inputtype="button"onclick="insRow()"
value="Insertrow">
</td><td>
<center>
<inputtype="button"onclick="delRow()"
value="Deletefirstrow">
</td></tr>
<tr><td>
<center>
<inputtype="button"onclick="insCell()"
value="Insertcell">
</td><td>
<center>
<inputtype="button"onclick="delCell()"
value="Deletecell">
</td></tr>
</table>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。