fdsa34345235
2011-09-07 00:30 阅读 545

js怎样才能动态修改表格中的内容

我想做一个功能,就是给表格动态添加行,下面是我的代码,但是目前只能实现添加和删除,不能修改,我想实现修改这个功能,哪位高手能帮我一下?下面这是全部的代码:



www.yuanshi88.com body{font-family:Verdana, Geneva, sans-serif; font-size:12px; margin:0px; padding:0px;} table{font-size:12px; font-family:Verdana, Geneva, sans-serif} td{text-align:center; background:#FFF} tr{height:20px;} th{background:#9DACBF; color:#FFF; height:20px; line-height:20px} a{color:#99C;} a:hover{color:#F93} .input td{padding:2px} .input input{width:100%; border:1px solid #000; overflow:hidden} .btn{} //简化document.getElementById()方法 function getObj(obj){ return document.getElementById(obj); } function insRow(){ //插入行 var obj=getObj("nw"); var newRow=obj.insertRow(obj.rows.length); //插入行方法 var newCell1=newRow.insertCell(newRow.cells.length); //插入单元格 如果直接用insertCell()在FF里会出错,所以为了兼容,我们要加上newRow.cells.length参数 var newCell2=newRow.insertCell(newRow.cells.length); var newCell3=newRow.insertCell(newRow.cells.length); newCell1.innerHTML=getObj("name").value; //插入单元格后,现在向单元格中添加内容 newCell2.innerHTML=getObj("add").value; //清空文本框 document.all("name").value=""; document.all("add").value=""; //将当前表格最后一行的序号写在delRow()方法中,这样我们可以在delRow()方法中删除当前行 newCell3.innerHTML='<a href="javascript:delRow('+(obj.rows.length-1)+')">删除</a>'; } //删除行 function delRow(i){ var obj=getObj("nw"); obj.deleteRow(i); }

Javascript控制表格 实现动态添加和删除表格内容

编号 名称 操作


  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    u011606457 _1_1_7_ 2011-09-07 10:29

    我也学习了一把

    [code="html"]



    www.yuanshi88.com body { font-family: Verdana, Geneva, sans-serif; font-size: 12px; margin: 0px; padding: 0px; } table { font-size: 12px; font-family: Verdana, Geneva, sans-serif } td { text-align: center; background: #FFF } tr { height: 20px; } th { background: #9DACBF; color: #FFF; height: 20px; line-height: 20px } a { color: #99C; } a:hover { color: #F93 } .input td { padding: 2px } .input input { width: 100%; border: 1px solid #000; overflow: hidden } .btn { } //简化document.getElementById()方法 function getObj(obj){ return document.getElementById(obj); } function insRow(){ //插入行 var obj=getObj("nw"); var newRow=obj.insertRow(obj.rows.length); //插入行方法 var newCell1=newRow.insertCell(newRow.cells.length); //插入单元格 如果直接用insertCell()在FF里会出错,所以为了兼容,我们要加上newRow.cells.length参数 var newCell2=newRow.insertCell(newRow.cells.length); var newCell3=newRow.insertCell(newRow.cells.length); newCell1.innerHTML=getObj("name").value; //插入单元格后,现在向单元格中添加内容 newCell2.innerHTML=getObj("add").value; //清空文本框 document.all("name").value=""; document.all("add").value=""; //将当前表格最后一行的序号写在delRow()方法中,这样我们可以在delRow()方法中删除当前行 newCell3.innerHTML='<a href="javascript:delRow('+(obj.rows.length-1)+')">删除</a>|<a href="javascript:editRow('+(obj.rows.length-1)+')">修改</a>'; } //删除行 function delRow(i){ var obj=getObj("nw"); obj.deleteRow(i); } //修改行 function editRow(i){ var tab=getObj("nw"); getObj("name").value=tab.rows(i).cells(0).innerText; getObj("add").value=tab.rows(i).cells(1).innerText; document.getElementById("Insert").style.display="none"; document.getElementById("Save").style.display="block"; document.getElementById("CurrentRow").value=i; } function saveRow(){ var i=document.getElementById("CurrentRow").value-0; var tab=getObj("nw"); tab.rows(i).cells(0).innerText= getObj("name").value; tab.rows(i).cells(1).innerText=getObj("add").value; getObj("name").value=""; getObj("add").value=""; document.getElementById("Insert").style.display="block"; document.getElementById("Save").style.display="none"; }

    Javascript控制表格 实现动态添加和删除表格内容


    编号 名称 操作


    [/code]

    点赞 评论 复制链接分享

相关推荐