-
碎花信纸2019-06-13 00:00
- 10
- 44
- 0
**1、我想要做的效果是，点击当前单元格里的“删除”时，删除当前一行；同时也可以添加行。现在添加行我做到了。但是删除本来就存在的表格行时遇到问题了。我怎么弄都删除不了当前已存在的表格行；麻烦前辈们帮忙看一下我的代码哪里出错了，并帮我提一下我应该如何解决。谢谢；
2、我的代码：**
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script>
window.onload = function(){
var oTable = document.getElementById('aTab_1');
var oName = document.getElementById('name_inpt');
var oNian = document.getElementById('nian_ipnt');
var oBut = document.getElementById('iBut_1');
//alert(oTable.tBodies[0].rows.length);
//alert(oTable.tBodies[1].rows.length);
var id = oTable.tBodies[1].rows.length+1;
//alert(id);
//alert(oTable.tBodies[0]);
oBut.onclick = function(){
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
oTd.innerHTML=id++;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML=oName.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML=oNian.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = '<a href="javascript:;">'+'删除'+'</a>'
oTr.appendChild(oTd);
oTable.tBodies[1].appendChild(oTr);
var oX = oTd.getElementsByTagName('a')[0];
oX.onclick = function(){
oTable.tBodies[1].removeChild(this.parentNode.parentNode)
};
};
var tbody_1 = oTable.getElementsByTagName('tbody');
var otrs = tbody_1[1].getElementsByTagName('tr');
//var ottd = otrs.getElementsByTagName('td');
//alert(otds);
//alert(oX.innerHTML);
//alert(oX.length);
for(var i=0;i<otrs.length;i++){
var otd_1 = otrs[i].getElementsByTagName('td');
var aA = otd_1[3].getElementsByTagName('a');
alert(aA.innerHTML);
/* for(var i=0;i<otd_1.length;i++){
var aA = otd_1[i].getElementsByTagName('a');
alert(aA.innerHTML);
} */
};
}
</script>
</head>
<body>
姓名：<input type="text" id="name_inpt" />
年龄: <input type="text" id="nian_ipnt" />
<input type="button" value="插入" id="iBut_1" />
<table border=1 width="500" id="aTab_1">
<tbody>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
<td><a href="javascript:;">删除1</a></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>31</td>
<td><a href="javascript:;">删除2</a></td>
</tr>
<tr>
<td>3</td>
<td>王二</td>
<td>19</td>
<td><a href="javascript:;">删除3</a></td>
</tr>
<tr>
<td>4</td>
<td>呼吸</td>
<td>28</td>
<td><a href="javascript:;">删除4</a></td>
</tr>
<tr>
<td>5</td>
<td>欧克</td>
<td>28</td>
<td><a href="javascript:;">删除5</a></td>
</tr>
</tbody>
</table>
</body>
</html>
下面是我做的删除已存在表格行的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script>
window.onload = function(){
var oTable = document.getElementById('aTab_1');
var oName = document.getElementById('name_inpt');
var oNian = document.getElementById('nian_ipnt');
var oBut = document.getElementById('iBut_1');
//alert(oTable.tBodies[0].rows.length);
//alert(oTable.tBodies[1].rows.length);
var id = oTable.tBodies[1].rows.length+1;
//alert(id);
//alert(oTable.tBodies[0]);
oBut.onclick = function(){
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
oTd.innerHTML=id++;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML=oName.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML=oNian.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = '<a href="javascript:;">'+'删除'+'</a>'
oTr.appendChild(oTd);
oTable.tBodies[1].appendChild(oTr);
var oX = oTd.getElementsByTagName('a')[0];
oX.onclick = function(){
oTable.tBodies[1].removeChild(this.parentNode.parentNode)
};
};
var tbody_1 = oTable.getElementsByTagName('tbody');
var otrs = tbody_1[1].getElementsByTagName('tr');
//var ottd = otrs.getElementsByTagName('td');
//alert(otds);
//alert(oX.innerHTML);
//alert(oX.length);
for(var i=0;i<otrs.length;i++){
var otd_1 = otrs[i].getElementsByTagName('td');
var aA = otd_1[3].getElementsByTagName('a');
//alert(aA[0].innerHTML);
aA[0].onclick = function(){
oTable.tbody_1.removeChild(this.parentNode.parentNode);
}
/* for(var i=0;i<otd_1.length;i++){
var aA = otd_1[i].getElementsByTagName('a');
alert(aA.innerHTML);
} */
};
}
</script>
</head>
<body>
姓名：<input type="text" id="name_inpt" />
年龄: <input type="text" id="nian_ipnt" />
<input type="button" value="插入" id="iBut_1" />
<table border=1 width="500" id="aTab_1">
<tbody>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
<td><a href="javascript:;">删除1</a></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>31</td>
<td><a href="javascript:;">删除2</a></td>
</tr>
<tr>
<td>3</td>
<td>王二</td>
<td>19</td>
<td><a href="javascript:;">删除3</a></td>
</tr>
<tr>
<td>4</td>
<td>呼吸</td>
<td>28</td>
<td><a href="javascript:;">删除4</a></td>
</tr>
<tr>
<td>5</td>
<td>欧克</td>
<td>28</td>
<td><a href="javascript:;">删除5</a></td>
</tr>
</tbody>
</table>
</body>
</html>1
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 10 元积分
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部