js动态添加一行如何用A标签删除动态添加的这一行-JavaSript-爱易网页

js动态添加一行如何用A标签删除动态添加的这一行

日期：2014-05-16　浏览次数：20340 次

js动态添加一行怎么用A标签删除动态添加的这一行
在一个表格里动态添加一行内容，动态添加的一行里有一个DEL<a>标签，
然后点击DEL<a>标签删除这一行，
怎么获取到这一行怎么删除

------解决方案--------------------



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

table{width:800px;

height:auto;

background-color:lightblue;

border:1px solid black;}

th{

background-color:lightgreen;}

th,td{

border-left:1px solid black;

border-top:1px solid black;

height:30px;

font-size:13px;

text-align:center;}

</style>

<script>

 

   function getParent(el,tn){while(el&&el.tagName!=tn)el=el.parentNode;return el}

  function del(el){

    var i=getParent(el,'TR').rowIndex,tb=getParent(el,'TABLE');

    tb.deleteRow(i);

  }

function addNode(){

var table=document.getElementsByTagName("table")[0];

var tbody=table.getElementsByTagName("tbody")[0];

var tradd=document.createElement("tr");

var tdOne=document.createElement("td");

var tdTwo=document.createElement("td");

var tdThree=document.createElement("td");

var tdFour=document.createElement("td");

var tdFive=document.createElement("td");

var tdSix=document.createElement("td");

tdOne.innerHTML=document.getElementById("name").value;

tdTwo.innerHTML=document.getElementById("num").value;

tdThree.innerHTML=document.getElementById("price").value;

tdFour.innerHTML=document.getElementById("yf").value;

var sum;

sum=parseInt(document.getElementById("num").value)*parseFloat(document.getElementById("price").value)+parseInt(document.getElementById("yf").value);

tdFive.innerHTML=sum;

tdSix.innerHTML='<a href="javascript:;" onclick="del(this)">del</a>';

tradd.appendChild(tdOne);

tradd.appendChild(tdTwo);

tradd.appendChild(tdThree);

tradd.appendChild(tdFour);

tradd.appendChild(tdFive);

tradd.appendChild(tdSix);

tbody.appendChild(tradd);

}

</script>

</head>



<body>

<table cellpadding="0" cellspacing="0" border="0" id="goods">

<tbody>

<tr>

<th>商品名称</th>

<th>数量</th>

<th>单价</th>

<th>运费</th>

<th>合计</th>

<th>操作</th>

</tr>

</tbody>

</table><br />

<input type="button" value="添加一行" onclick="addNode()" /><br />

商品名称：<input type="text" id="name" /><br />

商品数量：<input type="text" id="num" /><br />

商品单价：<input type="price" id="price" /><br />

运费：<input type="text" id="yf" />

</body>

</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js动态添加一行如何用A标签删除动态添加的这一行

相关资料更多>

推荐阅读更多>