在一个表格里动态添加一行内容,动态添加的一行里有一个DEL<a>标签,
然后点击DEL<a>标签 删除这一行,
怎么获取到这一行怎么删除
然后点击DEL<a>标签 删除这一行,
怎么获取到这一行怎么删除
解决方案 »
- 获取json数据指定的值
- 有没有办法控制alert提示弹出的位置?
- 求助,紧急!!!请各位大虾帮我看看javascrept 链接ACCESS 数据库的问题 一添加就报错怎么回事
- 打开窗口后,为什么没法从父窗口中 获取(设置) 子窗口的数据?
- 请问一下 怎么在拖动浏览器大小的时候...
- 如何提示,正在查询,请等等,且有进度条。
- 页面自动关闭、关闭窗口时不弹出提示框?
- 如何将一<div>中的内容放于applet上??
- 如何取子串!
- 求:将String转化为SELECT的javascript函数(string="aaa;bbb;ccc;ddd;")
- <!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")