JS window.onload

d_evil_f 2017-01-11 06:58:43

我做的效果是点击删除按钮，删除对应行

思路是在页面初始化时给每个a标签(删除)赋index值，然后再根据这个index找到对应的行，再删除此行，从而达到目的。
初始化时index赋值成功，可是删除就出现了问题，点第一下会正常，之后不是会提示undefined，就是删的不是对应行，而且最后一个删除的行，无法删除。。
js代码：
<script>
var a;
var b;
var length;
window.onload = function () {
a = document.getElementById('table');
b = a.rows;

length=b.length
for (var i = 0; i < length; i++) {
b[i].cells[1].firstChild.index = i;

}
};
function trdelete(obj) {

var getIndex = obj.index;

b[getIndex].parentNode.removeChild(b[getIndex]);
}
</script>
table代码：
<table class="w960" id="table" cellspacing="0" rules="yes">
<tr>
<td>1111111</td>
<td><a href="#" onclick="trdelete(this)" >删除</a></td>
</tr>
<tr>
<td>222222222</td>
<td><a href="#" onclick="trdelete(this)" >删除</a></td>
</tr>
<tr>
<td>333333333</td>
<td><a href="#" onclick="trdelete(this)" >删除</a></td>
</tr>
<tr>
<td>44444444444</td>
<td><a href="#" onclick="trdelete(this)" >删除</a></td>
</tr>
<tr>
<td>55555555555</td>
<td><a href="#" onclick="trdelete(this)" >删除</a></td>
</tr>
<tr>
<td>666666666666</td>
<td><a href="#" onclick="trdelete(this)" >删除</a></td>
</tr>
</table>
后来我把for循环的代码位置挪到了trdelete函数里，就可以实现功能了，只是很困惑，为什么得移动到onclick事件才可以实现？？
修改后代码：
<script>
var a;
var b;
var length;
window.onload = function () {
a = document.getElementById('table');
b = a.rows;

};
function trdelete(obj) {

length = b.length;
for (var i = 0; i < length; i++) {
b[i].cells[1].firstChild.index = i;
}
var getIndex = obj.index;

b[getIndex].parentNode.removeChild(b[getIndex]);
}
</script>

...全文

202 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

d_evil_f 2017-01-14

打赏
举报

谢谢大家的热心回答！

forwardNow 2017-01-11

打赏
举报

变量 b 是一个动态NodeList对象，伪数组对象，不是真正的数组， NodeList里的元素结点变化都会反映到 NodeList，也就是说你删除一个row，b的length会变化，其他的row结点会重新排列。如果你想按照你原先的思路做，可以创建 NodeList 的一个快照，一个真正的数组， var snapshot = Array.prototype.slice.call( b ); 然后操作 snapshot ，就不会出错了。

Go 旅城通票 2017-01-11

打赏
举报

引用 4 楼 d_evil_f 的回复:

越界了是什么意思啊？@ [quote=引用 2 楼 showbo 的回复:] 第一个代码如果执行了删除操作的话，如删除前面的行，然后再删除后面的行（如最后一个），会导致 b[getIndex].parentNode.removeChild(b[getIndex]);越界了，这样红色返回null，你再调用parentNode就报错了，放删除函数里面你重新设置过index，当然不会报错直接通过dom关系删除就好了，干嘛多增加个index属性，没意义。
<table class="w960" id="table" cellspacing="0" rules="yes">
    <tr>
        <td>1111111</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>222222222</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>333333333</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>44444444444</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>55555555555</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>666666666666</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
</table>

<script>
    function trdelete(obj) {
        obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
    }
</script>

越界了是什么意思啊？？[/quote] 你不是有6条数据，所以你的666的index存储的是5，这样你删除第一条数据，那么b这个dom数组是会随着变化的，变为长度5，那么你删除666这个数据是，那就是b[5]，就越界了（。。

d_evil_f 2017-01-11

打赏
举报

越界了是什么意思啊？@

引用 2 楼 showbo 的回复:

第一个代码如果执行了删除操作的话，如删除前面的行，然后再删除后面的行（如最后一个），会导致 b[getIndex].parentNode.removeChild(b[getIndex]);越界了，这样红色返回null，你再调用parentNode就报错了，放删除函数里面你重新设置过index，当然不会报错直接通过dom关系删除就好了，干嘛多增加个index属性，没意义。
<table class="w960" id="table" cellspacing="0" rules="yes">
    <tr>
        <td>1111111</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>222222222</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>333333333</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>44444444444</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>55555555555</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>666666666666</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
</table>

<script>
    function trdelete(obj) {
        obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
    }
</script>

越界了是什么意思啊？？

d_evil_f 2017-01-11

打赏
举报

对哦，我没想到那个方法。谢谢了！

Go 旅城通票 2017-01-11

打赏
举报

第一个代码如果执行了删除操作的话，如删除前面的行，然后再删除后面的行（如最后一个），会导致 b[getIndex].parentNode.removeChild(b[getIndex]);越界了，这样红色返回null，你再调用parentNode就报错了，放删除函数里面你重新设置过index，当然不会报错直接通过dom关系删除就好了，干嘛多增加个index属性，没意义。

<table class="w960" id="table" cellspacing="0" rules="yes">
    <tr>
        <td>1111111</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>222222222</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>333333333</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>44444444444</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>55555555555</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
    <tr>
        <td>666666666666</td>
        <td><a href="#" onclick="trdelete(this)">删除</a></td>
    </tr>
</table>

<script>
    function trdelete(obj) {
        obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
    }
</script>

d_evil_f 2017-01-11