6添加行删除行和删除列
Posted 红酒人生
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了6添加行删除行和删除列相关的知识,希望对你有一定的参考价值。
添加行、删除行和删除列
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script type="text/javascript"> 7 function addRow(){ 8 var table=document.getElementById("mytable"); 9 var rowindex=table.rows.length; 10 var row=table.insertRow(rowindex); 11 row.insertCell(0).innerHTML="3"; 12 row.insertCell(1).innerHTML="4"; 13 } 14 function delRow(){ 15 var table=document.getElementById("mytable"); 16 var rowindex=table.rows.length; 17 table.deleteRow(rowindex-1); 18 } 19 function delCell(){ 20 var table=document.getElementById("mytable"); 21 var rowindex=table.rows.length; 22 table.rows[rowindex-1].deleteCell(0); 23 } 24 </script> 25 </head> 26 27 <body> 28 <input type="button" value="删除一行" onclick="delRow()"/> 29 <input type="button" value="添加一行" onclick="addRow()"/> 30 <input type="button" value="单元格一行" onclick="delCell()"/> 31 <table id="mytable" border="1"> 32 <tr><td>1</td><td>2</td></tr> 33 </table> 34 </body> 35 </html>
1、运行效果图
2、添加行
3、删除行
4、删除列
以上是关于6添加行删除行和删除列的主要内容,如果未能解决你的问题,请参考以下文章
JS节点操作 (表格在js中添加行和单元格,并有一个删除键)