首页 > web前端 > js教程 > 利用js动态添加删除table行的示例代码_javascript技巧

利用js动态添加删除table行的示例代码_javascript技巧

WBOY
发布: 2016-05-16 17:09:04
原创
828 人浏览过

如下所示:

复制代码 代码如下:

//动态添加行
function addRow(){
   var table = document.getElementById("tableID");
   var newRow = table.insertRow(); //创建新行
   var newCell1 = newRow.insertCell(); //创建新单元格
   newCell.innerHTML = ""; //单元格内的内容
   newCell.setAttribute("align","center"); //设置位置
}

//动态删除行
function deleteRow(){
   var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
   var styles = document.getElementById("tableID");
   styles.deleteRow(rowIndex);
}


















产品名称

产品数量

产品单价


   
    

   
    


<script><BR>function addRow(){<BR>//添加行 <P>var newTr = testTbl.insertRow();<BR>//添加列<BR>var newTd0 = newTr.insertCell();<BR>var newTd1 = newTr.insertCell();<BR>var newTd2 = newTr.insertCell();<BR>var newTd3 = newTr.insertCell();<BR>//设置列内容和属性 <P>newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;<BR>newTd1.innerText = document.all("b").value;<BR>newTd2.innerText = document.all("c").value;<BR>newTd3.innerHTML= '<input type="button" name="del" value="删除" onclick="del(this)">';<BR>}<BR>function del(o)<BR>{<BR>var t=document.getElementById('testTbl');<BR>t.deleteRow(o.parentNode.parentNode.rowIndex)<BR>}<BR></script>


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板