javascript自动增删行

最新推荐文章于 2024-04-26 16:47:03 发布

chasnoly

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量419

点赞数

分类专栏： [笔记] 文章标签： javascript input function class button table

本文链接：https://blog.csdn.net/chasnoly/article/details/2447413

版权

[笔记] 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

闲下来整理些资料，与大家共享。

代码有参考别人的部分。

为了方便阅读稍加几处注释。

在web开发中常常会用到表格，对表格的增删也就有了实际应用。

下面这个例子通过动态操作HTML代码利用DOM实现了表格的增删。

<html>
<head>
<title>Untitled   Document</title>
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">
<script   language="javascript">
function   get_Element(the_ele,the_tag)
{
the_tag   =   the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)
return   the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)
return   the_ele;
}
return(null);
}

function   add_Row(the_table)
{
var   the_row,the_cell;
var   cur_rows=the_table.rows.length;
the_row=cur_rows==null?-1:(cur_rows);
var   i=the_row-1;
var   newrow=the_table.insertRow(i);//得到插入位置
the_cell=newrow.insertCell(0);
the_cell.innerHTML="<center   >"+i;
the_cell=newrow.insertCell(1);
the_cell.innerHTML="<center   ><input   name=/"A/"   type=text   size=13>";
the_cell=newrow.insertCell(2);
the_cell.innerHTML="<center   ><input   name=/"B/"   type=text   size=13     >";
the_cell=newrow.insertCell(3);
the_cell.innerHTML="<center   ><input   name=/"C/"   type=text   size=13   ><INPUT   type=button   value=删除     οnclick=del_row(myTable)>";
}

function   del_row(the_table){
    var   the_cell;
the_cell=get_Element(event.srcElement,"td");
var   index=the_cell.parentElement.rowIndex;
if(the_cell==null)   return;
if(the_table.rows.length==1)   return;
the_table.deleteRow(index);

// 设置序列号
   for(var   i=1;i<document.getElementById('myTable').rows.length-1;i++)
{

    document.getElementById('myTable').rows[i].childNodes[0].innerText   =i;
    document.getElementById('myTable').rows[i].childNodes[0].style.textAlign='center';
}
}
</script>
</head>
<body>
       <table     id="myTable"   width="100%"   border="1"   cellpadding="4"   cellspacing="1"   >
    <tr   class="TdContent">
     <td   ><div   align="center">序号</div></td>
     <td   ><div   align="center">A</div></td>
     <td   ><div   align="center">B</div></td>
     <td   ><p   align="center">C</p></td>
    </tr>
    <tr   class="TdContent">
     <td><div   align="center">1</div></td>
     <td><div   align="center">
      <input   name="A"   type="text"   size="13"   >
     </div></td>
     <td><div   align="center">
      <input   name="B"   type="text"   size="13"   >
     </div></td>
     <td>
      <div   align="center">
       <input   name="C"   type="text"   size="13"   >
      </div></td>
    </tr>
          <tr   class="TdContent">
             <td   colspan="4"   align="center"><input     type="button"   value="添加一行"       class="ButtonStyle"   onClick="add_Row(myTable)"></td>
                      </tr>
              </table>
</body>
</html>

chasnoly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript自动增删行

闲下来整理些资料，与大家共享。代码有参考别人的部分。为了方便阅读稍加几处注释。在web开发中常常会用到表格，对表格的增删也就有了实际应用。下面这个例子通过动态操作HTML代码利用DOM实现了表格的增删。 Untitled Document function get_Element(the_ele,the_tag) { the_
复制链接

扫一扫