js动态添加一行怎么用A标签删除动态添加的这一行 在一个表格里动态添加一行内容,动态添加的一行里有一个DEL<a>标签,然后点击DEL<a>标签 删除这一行,怎么获取到这一行怎么删除 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!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><script>function del(){ }</script></head><body><form id="form1" name="form1" method="post" action=""> <table width="680" height="193" border="1"> <tr> <td> </td> <td><a href="javascript:del()">del</a></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table></form></body></html>这是一个简单的,删除里面怎么写 <!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><script>function del(){ }</script></head><body><form id="form1" name="form1" method="post" action=""> <table width="680" height="193" border="1"> <tr> <td> </td> <td><a href="javascript:del()">del</a></td> </tr> <tr> <td> </td> <td><a href="javascript:del()">del</a></td> </tr> <tr> <td> </td> <td><a href="javascript:del()">del</a></td> </tr> <tr> <td> </td> <td><a href="javascript:del()">del</a></td> </tr> <tr> <td> </td> <td><a href="javascript:del()">del</a></td> </tr> <tr> <td> </td> <td><a href="javascript:del()">del</a></td> </tr> <tr> <td> </td> <td><a href="javascript:del()">del</a></td> </tr> </table></form></body></html> <table> <tr> <td>1</td><td><a href='#' onclick='del(this)' >del</a></td> </tr> <tr> <td>2</td><td><a href='#' onclick='del(this)'>del</a></td> </tr></table><script src="jquery-1.4.4.js"></script><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); } </script> <table> <tr> <td>1</td><td><a href='#' onclick='del(this)' >del</a></td> </tr> <tr> <td>2</td><td><a href='#' onclick='del(this)'>del</a></td> </tr></table><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); } </script> 那个del是动态添加上去的 不是自己写的 lz可以考虑用jquery,举个简单的例子:html:<table id="TId"><tr><td>aaaaaa</td><td><a href="javascript:void(0)">Del</a></td></tr><tr><td>bbbbbbbb</td><td><a href="javascript:void(0)">Del</a></td></tr><tr><td>cccccccc</td><td><a href="javascript:void(0)">Del</a></td></tr></table> jquery:<script type="text/javascript"> $(document).ready(function() { $("#TId a").click(function() { $(this).parent().parent().remove(); });});</script> 另外lz记得引用jquery文件 <div id='divId'></div><script type='text/javascript'> function createElements() { var _p = document.createElement('p'); var _a = document.createElement('a'); _a.onclick = function() { this.parentNode.parentNode.removeChild(this.parentNode); } _p.apendChild(_a); document.getElementById('divId').apendChild(_p);}</script> 如果<a>是动态添加的那函数要改为:$(document).ready(function() { $("#TId a").live("click",function() { $(this).parent().parent().remove(); });}); 我们jquery还没有学,现在只能用JS做,我做的那个现在就是del<a>标签里面的那个删除功能实现不了,点del获取不到是要删除的哪一行 用4楼那样就可以,不用jquery,3楼也没用jquery,引用jq那一行可删除掉 <!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 del(){ }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:del()">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>代码是这样的 那个del方法怎么写 tdSix.innerHTML='<a href="javascript:del()">del</a>';改成==>tdSix.innerHTML='<a href="javascript:del(this)">del</a>'你这样试试 不行网页错误详细信息用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; qdesk 2.3.1186.202)时间戳: Wed, 9 Jan 2013 06:53:47 UTC消息: 'rowIndex' 为空或不是对象行: 23字符: 5代码: 0URI: file:///C:/Documents%20and%20Settings/Administrator/桌面/Untitled-2.html <!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> 找到A标签父级的TR标签,tr对象上有 rowIndex,就是我们要删除的行下标删除表行是 tb.deleteRow(tr.rowIndex); getParent(el,tn),功能:找到el元素父级标签名为tn的节点比如:A的父级TR,getParent(A,"TR") 请问html编辑器是怎么做的? pixelTop为何针对页内样式0 一个正则表达式的奇怪问题 在做bbs的主题编辑功能,不知道怎么把主题数据赋值给HtmlEditor编辑器来进行编辑,会的指教一下. javascript,js如何接收,获取function方法的返回值 return JS加载JSP的问题 关于document.all.tags 为什么我的鼠标按键值不对呢? 如何生成随机数? 网页背景图片不重复 myeclipse中 <!doctype html>的问题 怎样能将网页中的flash打印出来
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function del(){
}
</script>
</head><body>
<form id="form1" name="form1" method="post" action="">
<table width="680" height="193" border="1">
<tr>
<td> </td>
<td><a href="javascript:del()">del</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
这是一个简单的,删除里面怎么写
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function del(){
}
</script>
</head><body>
<form id="form1" name="form1" method="post" action="">
<table width="680" height="193" border="1">
<tr>
<td> </td>
<td><a href="javascript:del()">del</a></td>
</tr>
<tr>
<td> </td>
<td><a href="javascript:del()">del</a></td>
</tr>
<tr>
<td> </td>
<td><a href="javascript:del()">del</a></td>
</tr>
<tr>
<td> </td>
<td><a href="javascript:del()">del</a></td>
</tr>
<tr>
<td> </td>
<td><a href="javascript:del()">del</a></td>
</tr>
<tr>
<td> </td>
<td><a href="javascript:del()">del</a></td>
</tr>
<tr>
<td> </td>
<td><a href="javascript:del()">del</a></td>
</tr>
</table>
</form>
</body>
</html>
<table>
<tr>
<td>1</td><td><a href='#' onclick='del(this)' >del</a></td>
</tr>
<tr>
<td>2</td><td><a href='#' onclick='del(this)'>del</a></td>
</tr>
</table>
<script src="jquery-1.4.4.js"></script>
<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);
}
</script>
<tr>
<td>1</td><td><a href='#' onclick='del(this)' >del</a></td>
</tr>
<tr>
<td>2</td><td><a href='#' onclick='del(this)'>del</a></td>
</tr>
</table>
<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);
}
</script>
不是自己写的
html:
<table id="TId">
<tr><td>aaaaaa</td><td><a href="javascript:void(0)">Del</a></td></tr>
<tr><td>bbbbbbbb</td><td><a href="javascript:void(0)">Del</a></td></tr>
<tr><td>cccccccc</td><td><a href="javascript:void(0)">Del</a></td></tr>
</table> jquery:
<script type="text/javascript">
$(document).ready(function() {
$("#TId a").click(function() {
$(this).parent().parent().remove();
});
});
</script> 另外lz记得引用jquery文件
<script type='text/javascript'>
function createElements() {
var _p = document.createElement('p');
var _a = document.createElement('a');
_a.onclick = function() {
this.parentNode.parentNode.removeChild(this.parentNode);
}
_p.apendChild(_a);
document.getElementById('divId').apendChild(_p);
}
</script>
如果<a>是动态添加的那函数要改为:
$(document).ready(function() {
$("#TId a").live("click",function() {
$(this).parent().parent().remove();
});
});
<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 del(){
}
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:del()">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>
代码是这样的
那个del方法怎么写
改成==>
tdSix.innerHTML='<a href="javascript:del(this)">del</a>'
你这样试试
网页错误详细信息用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; qdesk 2.3.1186.202)
时间戳: Wed, 9 Jan 2013 06:53:47 UTC
消息: 'rowIndex' 为空或不是对象
行: 23
字符: 5
代码: 0
URI: file:///C:/Documents%20and%20Settings/Administrator/桌面/Untitled-2.html
<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>
删除表行是 tb.deleteRow(tr.rowIndex); getParent(el,tn),功能:找到el元素父级标签名为tn的节点
比如:A的父级TR,getParent(A,"TR")