Dom 删除表格行列实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom 删除表格行列实例</title>

</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
    <tbody>
        <tr>
            <td>00</td>
            <td>01</td>
            <td>02</td>
            <td>03</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
        <tr>
            <td>30</td>
            <td>31</td>
            <td>32</td>
            <td>33</td>
        </tr>
        <tr>
            <td>40</td>
            <td>41</td>
            <td>42</td>
            <td>43</td>
        </tr>
    </tbody>
</table>
<br/>
<input type="button" value="删除一行" onclick="deleteRow()"/>&nbsp; &nbsp;
<input type="button" value="删除一列" onclick="deleteColumn()"/>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//获得表格对象
var _table=document.getElementById("table1");

//定义函数,用于删除第一行
function deleteRow(){
 _table.deleteRow(0);
}
//定义函数,用于删除第一列
function deleteColumn(){
 //删除一列时需要对每一行分别进行列删除
 for(var i=0;i<_table.rows.length;i++){
  _table.rows[i].deleteCell(0);
 }
}
//-->
</script>

时间: 2024-09-20 11:32:39

Dom 删除表格行列实例的相关文章

js dom删除表格中的行后如何恢复

问题描述 jsdom删除表格中的行后,如何点击另外一个按钮可以将行和行中的数据恢复回去用removeChild()删除的 解决方案 解决方案二: 用数组包含,如果你只是一个的话,那你直接用一个参数接收就行了,下个给个参考例子vardom=null;$('#bt_remove').click(function(){dom=$('#dom');$('#container').remove(dom);});$('#bt_recover').click(function(){if(dom!=null){

js dom删除行和单元格,交换两行的位置

本文章提供二个关于dom操作表格的实例,我们利用了js dom来删除行和单元格,交换两行的位置哦,下面实例己经说的得很明天了. 增加删除行,表格 <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>www.111cn.net</title> </head> <body> <table

js操作table元素实现表格行列新增、删除技巧总结_javascript技巧

本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************

js dom动态添加删除表格数据的例子

学习了两天的 js dom 高级操作应用,实例代码基本上都听懂了,只是自己还没有能力全部敲出来,因为 js 操作 table 的代码太多了,js 对节点操作除了 div 之外,也可以更好的操作表单,这两天学到的是 js 如何进行对 table 的操作,当然也遇到了神奇的 js 增删改查,虽然没有用到数据库,但其效果蛮给力的,本来视频的代码想要一行一行敲下来,只是脑子里太乱了,只能从网上把视频上的代码给拷贝下来,仅供自己参考使用吧,这里的代码是关于 js 动态添加与删除表格数据的,感觉有点意思,回

dom 动态删除表格行

Domdelete行,这个以前有写过但是这次专门来讲讲它delete表格行吧,deleteRow哦.下面我们来看看实例吧. <html> <head> <script type="text/javascript"> function deleteRow(r)   {   var i=r.parentNode.parentNode.rowIndex   document.getElementById('myTable').deleteRow(i)  

javascript 使用DOM控制表格及表单实例教程

使用DOM控制表格 表格常用的DOM 表格添加操作的方法常用的为insertRow()和insertCell()方法. row是从零开始计算起的,例如: var oTr = document.getElementById("member").insertRow(2) 是指将新行添加到第二行. var aText = new Array();    aText[0] = document.createTextNode("fresheggs");    aText[1]

js+dom增加删除表格行代码

js+dom增加删除表格行代码 <table id="tbl" width="300" name="tbl" border="1">   <tr>     <td width="160">content</td>     <td>name</td>     <td><input type="button&qu

javascript入门教程:Dom创建删除表格

<html> <head> <title>javascript入门教程:Dom创建删除表格</title> </head> <body> <div id="tableTest"> </div> </body> </html> <script language="JavaScript" type="text/javascript&qu

原生JS和JQuery动态添加、删除表格行的方法

  本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4