首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

[]一段全选/全删代码，如从上一行一行地删，能全删，但如用全选/全删方式，却删不全

2012-12-29 
[求助]一段全选/全删代码，如从下一行一行地删，能全删，但如用全选/全删方式，却删不全·下面的代码是一段全选

[求助]一段全选/全删代码，如从下一行一行地删，能全删，但如用全选/全删方式，却删不全
·
     下面的代码是一段全选/全删表格代码，有趣的是，这个表格，如从下向上打勾一行一行地删除，最后能全部删除完，但如用全选/选消（Select All / Clear All）方式全删，则只能删最下边的一行，其余删不掉。如从上往下一行一行地删，那么第二行就删不掉。这第二行（002）的代码没什么异常，却删不掉。大家不妨试试看。不知问题在哪。请高手赐教。
<html>
<head>
      <table width="960" border="0" cellspacing="0" cellpadding="0" class="tb" id="tlist">
      <thead>
            <tr>
                <td width="150"><input type="checkbox" name="checkall"  onClick="check_all(this)" >Select All / Clear All</td>
                <td width="150">&nbsp ITEM NO</td>
                <td width="360">&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp ITEM DESCRIPTION</td>
                <td width="100">&nbsp &nbsp &nbsp &nbsp QTY</td>
                <td width="100">&nbsp &nbsp &nbsp &nbsp &nbspPRICE</td>
                <td width="100">&nbsp &nbsp &nbsp &nbsp TOTAL</td>
                
            </tr>
        </thead> 
        </table>
</head>
       <table width="960" border="0" cellspacing="0" cellpadding="0" class="tb" id="tlist">
       <tr>
<script language="JavaScript">
function check_all(obj){
for(i=0;i<document.getElementsByName("c").length;i++){
document.getElementsByName("c")[i].checked=obj.checked;
}
}
</script>
                <td align="center width="110">  <input type="checkbox" name="c" /> </td>
                <td align="center width="100"> <input type=  "text" id="fno1" name="fno1" size=32 value="001"> </td>
                <td align="center" width="360"><input type=  "text" size=30  value="television">  </td>
                <td align="center width="130"> <input type="text" id="fqty1" name="fqty1" size=7 maxlength=7 value='250' onchange='chtotal(1);'></td>
                <td align="center width="130"> <input type="text" id="fprice1" name="fprice1" size=6 maxlength=6 value='0' onchange='chtotal(1);'></td>


                 <td align="center width="130">  <input type="text" id="ftotal1" name="ftotal1" size=8 readonly > </td>
            </tr>

            <tr>
<script language="JavaScript">
function check_all(obj){
for(i=0;i<document.getElementsByName("c").length;i++){
document.getElementsByName("c")[i].checked=obj.checked;
}
}
</script>
                <td align="center width="110"> <input type="checkbox" name="c" /> </td>
                <td align="center width="100"> <input type=  "text" id="fno2" name="fno2" size=32 value="002"> </td>
                <td align="center" width="360"><input type=  "text"  size=30 value="radio"> </td>
                <td align="center width="130"> <input type="text" id="fqty2" name="fqty2" size=7 maxlength=7 value='120' onchange='chtotal(2);'></td>
                <td align="center width="130"> <input type="text" id="fprice2" name="fprice2" size=6 maxlength=6 value='0' onchange='chtotal(2);'></td>
                <td align="center width="130">  <input type="text" id="ftotal2" name="ftotal2" size=8 readonly > </td>
                
            </tr>

            <tr>
<script language="JavaScript">
function check_all(obj){
for(i=0;i<document.getElementsByName("c").length;i++){
document.getElementsByName("c")[i].checked=obj.checked;
}
}
</script>
                <td align="center width="110"> <input type="checkbox" name="c" /> </td>
                <td align="center width="100"> <input type=  "text" id="fno3" name="fno3" size=32 value="003"> </td>
                <td align="center" width="360"><input type=  "text"  size=30 value="display"> </td>
                <td align="center width="130"> <input type="text" id="fqty3" name="fqty3" size=7 maxlength=7 value='400' onchange='chtotal(3);'></td>
                <td align="center width="130"> <input type="text" id="fprice3" name="fprice3" size=6 maxlength=6 value='0' onchange='chtotal(3);'></td>


                <td align="center width="130">  <input type="text" id="ftotal3" name="ftotal3" size=8 readonly > </td>
                
            </tr>
                        
<script language="javascript"> 
function deleteAll(obj){
var checked = document.getElementsByName(obj);
debugger
for(var i = 0; i < checked.length; i ++){
if(checked[i].checked){
var tr=checked[i].parentNode.parentNode;
var tbody=tr.parentNode;
document.getElementById("fprice" + (i+1)).value=0;
chtotal(i+1);
tbody.removeChild(tr);
i--;
}
}
}
</script>

<td><input type="button" name="delete_button"  value="Delete" onclick="deleteAll('c');"></td>

<tr class="totalsum"><td>Total</td><td colspan=4></td><td colspan=2 align='right'><b id="totalsum">0</b></td><td colspan=2></td></tr>

<script type="text/javascript">
   function delrecord(btn) {/////////
        var tr = btn.parentNode.parentNode, tbody = tr.parentNode, rowIndex = tr.rowIndex+1;
        var t = document.getElementById("ftotal" + rowIndex), tt = document.getElementById("totalsum");
        
        var btn = document.getElementById('delbutton' + (rowIndex - 1));
        if (btn) btn.disabled = false; //这里将上一个button设置为有效
        tbody.removeChild(tr);
    }
   
   function chtotal(id) {
       var tt = document.getElementById("totalsum");
       var q = document.getElementById("fqty" + id);
       var p = document.getElementById("fprice" + id);
       var t = document.getElementById("ftotal" + id);
       if (q.value != '' && p.value != '') {
           var old = t.getAttribute('ov');
           if (old) old = parseInt(old); else old = 0;
           t.value = q.value * p.value;
           t.setAttribute('ov', t.value);
           tt.innerHTML = parseInt(tt.innerHTML) + parseInt(t.value) - old;
       }
   }
</script> 
</tbody>
</table>
</html>
------解决方案--------------------


没问题啊，从测试过了

<html>
<head>
      <table width="960" border="0" cellspacing="0" cellpadding="0" class="tb" id="tlist">
      <thead>
            <tr>
                <td width="150"><input type="checkbox" name="checkall"  onClick="check_all(this)" >Select All / Clear All</td>
                <td width="150">&nbsp ITEM NO</td>
                <td width="360">&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp ITEM DESCRIPTION</td>
                <td width="100">&nbsp &nbsp &nbsp &nbsp QTY</td>
                <td width="100">&nbsp &nbsp &nbsp &nbsp &nbspPRICE</td>
                <td width="100">&nbsp &nbsp &nbsp &nbsp TOTAL</td>
                
            </tr>
        </thead> 
        </table>
</head>
       <table width="960" border="0" cellspacing="0" cellpadding="0" class="tb" id="tlist">
       <tr>
<script language="JavaScript">
    function check_all(obj) {
        for (i = 0; i < document.getElementsByName("c").length; i++) {
            document.getElementsByName("c")[i].checked = obj.checked;
        }
    }
</script>
                <td align="center width="110">  <input type="checkbox" name="c" /> </td>
                <td align="center width="100"> <input type=  "text" id="fno1" name="fno1" size=32 value="001"> </td>
                <td align="center" width="360"><input type=  "text" size=30  value="television">  </td>
                <td align="center width="130"> <input type="text" id="fqty1" name="fqty1" size=7 maxlength=7 value='250' onchange='chtotal(1);'></td>
                <td align="center width="130"> <input type="text" id="fprice1" name="fprice1" size=6 maxlength=6 value='0' onchange='chtotal(1);'></td> 
 
                 <td align="center width="130">  <input type="text" id="ftotal1" name="ftotal1" size=8 readonly > </td>
            </tr>

            <tr>
<script language="JavaScript">
    function check_all(obj) {
        for (i = 0; i < document.getElementsByName("c").length; i++) {
            document.getElementsByName("c")[i].checked = obj.checked;
        }
    }
</script>
                <td align="center width="110"> <input type="checkbox" name="c" /> </td>
                <td align="center width="100"> <input type=  "text" id="fno2" name="fno2" size=32 value="002"> </td>
                <td align="center" width="360"><input type=  "text"  size=30 value="radio"> </td>
                <td align="center width="130"> <input type="text" id="fqty2" name="fqty2" size=7 maxlength=7 value='120' onchange='chtotal(2);'></td>
                <td align="center width="130"> <input type="text" id="fprice2" name="fprice2" size=6 maxlength=6 value='0' onchange='chtotal(2);'></td>
                <td align="center width="130">  <input type="text" id="ftotal2" name="ftotal2" size=8 readonly > </td>
                
            </tr>

            <tr>
<script language="JavaScript">
    function check_all(obj) {
        for (i = 0; i < document.getElementsByName("c").length; i++) {
            document.getElementsByName("c")[i].checked = obj.checked;
        }
    }
</script>
                <td align="center width="110"> <input type="checkbox" name="c" /> </td>
                <td align="center width="100"> <input type=  "text" id="fno3" name="fno3" size=32 value="003"> </td>
                <td align="center" width="360"><input type=  "text"  size=30 value="display"> </td> 
 
                <td align="center width="130"> <input type="text" id="fqty3" name="fqty3" size=7 maxlength=7 value='400' onchange='chtotal(3);'></td>
                <td align="center width="130"> <input type="text" id="fprice3" name="fprice3" size=6 maxlength=6 value='0' onchange='chtotal(3);'></td>
                <td align="center width="130">  <input type="text" id="ftotal3" name="ftotal3" size=8 readonly > </td>
                
            </tr>
                        
<script language="javascript">
    function deleteAll(obj) {
        var checked = document.getElementsByName(obj);
        //因为没删除一行checked对象的length也会-1，但是i会继续增加，所以只能删除一半，i++放到函数体中，不删除行的时候再++
        for (var i = 0; i < checked.length; /*i++*/) {
            if (checked[i].checked) {
                var tr = checked[i].parentNode.parentNode;
                var tbody = tr.parentNode;
                //下面2句需要修改，因为i在删除的时候不变，导致上一行对象移除后找不到对象了，按照DOM关系来更新
                //document.getElementById("fprice" + (i + 1)).value = 0;
                var input = tr.cells[4].getElementsByTagName('input')[0];
                input.value = 0;
                chtotal(input.id.replace('fprice', ''));
                tbody.removeChild(tr);

            } else i++;
        }
    }
</script>

<td><input type="button" name="delete_button"  value="Delete" onclick="deleteAll('c');"></td>

<tr class="totalsum"><td>Total</td><td colspan=4></td><td colspan=2 align='right'><b id="totalsum">0</b></td><td colspan=2></td></tr>

<script type="text/javascript">
    function delrecord(btn) {/////////
        var tr = btn.parentNode.parentNode, tbody = tr.parentNode, rowIndex = tr.rowIndex + 1;
        var t = document.getElementById("ftotal" + rowIndex), tt = document.getElementById("totalsum"); 
 

        var btn = document.getElementById('delbutton' + (rowIndex - 1));
        if (btn) btn.disabled = false; //这里将上一个button设置为有效
        tbody.removeChild(tr);
    }

    function chtotal(id) {
        var tt = document.getElementById("totalsum");
        var q = document.getElementById("fqty" + id);
        var p = document.getElementById("fprice" + id);
        var t = document.getElementById("ftotal" + id);
        if (q.value != '' && p.value != '') {
            var old = t.getAttribute('ov');
            if (old) old = parseInt(old); else old = 0;
            t.value = q.value * p.value;
            t.setAttribute('ov', t.value);
            tt.innerHTML = parseInt(tt.innerHTML) + parseInt(t.value) - old;
        }
    }
</script> 
</tbody>
</table>
</html>
 
[解决办法]
这个是按你的意思修改的，　完全可以运行。　

需要说明的是，　在论坛上发贴，　你的代码越清晰，　越有人愿意帮你。　
做得好一点，　人家看你的贴轻松，　你自己也不容易出错。

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function deleteAll(obj) {
            var checked = document.getElementsByName(obj);
            //将要删除的行保存于数组
            var delTrsArr = [];
            for (var i = 0; i < checked.length; i++) {
                if (checked[i].checked) {
                    delTrsArr.push(checked[i].parentNode.parentNode);
                    //将总统计值减去本行的统计值
                    var currTotal = document.getElementById("ftotal" + (i + 1)).value == "" ? 0 : parseFloat(document.getElementById("ftotal" + (i + 1)).value);
                    var totalsum = document.getElementById("totalsum");
                    totalsum.innerHTML = parseFloat(totalsum.innerHTML) - currTotal; 
 
                }
            }
            //没有要删除的行，　提示一下
            if (delTrsArr.length == 0) {
                alert("Please select items.");
                return;
            }
            //删除数组中的行。　分开处理，　免得纠缠不清。逻辑复杂了，就会容易出错
            for (var i = 0, len = delTrsArr.length; i < len; i++) {
                delTrsArr[i].parentNode.removeChild(delTrsArr[i]);
            }
        }
        function check_all(obj) {
            for (i = 0; i < document.getElementsByName("c").length; i++) {
                document.getElementsByName("c")[i].checked = obj.checked;
            }
        }
        function delrecord(btn) {
            var tr = btn.parentNode.parentNode, tbody = tr.parentNode, rowIndex = tr.rowIndex + 1;
            var t = document.getElementById("ftotal" + rowIndex), tt = document.getElementById("totalsum");

            var btn = document.getElementById('delbutton' + (rowIndex - 1));
            if (btn) btn.disabled = false; //这里将上一个button设置为有效
            tbody.removeChild(tr);
        }
        function chtotal(id) {
            var tt = document.getElementById("totalsum");
            var q = document.getElementById("fqty" + id);
            var p = document.getElementById("fprice" + id);
            var t = document.getElementById("ftotal" + id);
            if (q.value != '' && p.value != '') {
                var old = t.getAttribute('ov');
                if (old) old = parseInt(old); else old = 0; 
 
                t.value = q.value * p.value;
                t.setAttribute('ov', t.value);
                tt.innerHTML = parseInt(tt.innerHTML) + parseInt(t.value) - old;
            }
        }
    </script>
</head>
<body>
    <table width="960" border="0" cellspacing="0" cellpadding="0" class="tb" id="tlist">
        <thead>
            <tr>
                <td width="150">
                    <input type="checkbox" name="checkall" onclick="check_all(this)" />Select All / Clear All
                </td>
                <td width="150">
                    &nbsp ITEM NO
                </td>
                <td width="360">
                    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                    &nbsp &nbsp ITEM DESCRIPTION
                </td>
                <td width="100">
                    &nbsp &nbsp &nbsp &nbsp QTY
                </td>
                <td width="100">
                    &nbsp &nbsp &nbsp &nbsp &nbspPRICE
                </td>
                <td width="100">
                    &nbsp &nbsp &nbsp &nbsp TOTAL
                </td>
            </tr>
        </thead> 
 
        <tbody>
            <tr>
                <td align="center" width="110">
                    <input type="checkbox" name="c" />
                </td>
                <td align="center" width="100">
                    <input type="text" id="fno1" name="fno1" size="32" value="001" />
                </td>
                <td align="center" width="360">
                    <input type="text" size="30" value="television" />
                </td>
                <td align="center" width="130">
                    <input type="text" id="fqty1" name="fqty1" size="7" maxlength="7" value='250' onchange='chtotal(1);' />
                </td>
                <td align="center" width="130">
                    <input type="text" id="fprice1" name="fprice1" size="6" maxlength="6" value='0' onchange='chtotal(1);' />
                </td>
                <td align="center" width="130">
                    <input type="text" id="ftotal1" name="ftotal1" size="8" readonly />
                </td>
            </tr>
            <tr>
                <td align="center" width="110">
                    <input type="checkbox" name="c" />
                </td>
                <td align="center" width="100">
                    <input type="text" id="fno2" name="fno2" size="32" value="002" /> 
 
                </td>
                <td align="center" width="360">
                    <input type="text" size="30" value="radio" />
                </td>
                <td align="center" width="130">
                    <input type="text" id="fqty2" name="fqty2" size="7" maxlength="7" value='120' onchange='chtotal(2);' />
                </td>
                <td align="center" width="130">
                    <input type="text" id="fprice2" name="fprice2" size="6" maxlength="6" value='0' onchange='chtotal(2);' />
                </td>
                <td align="center" width="130">
                    <input type="text" id="ftotal2" name="ftotal2" size="8" readonly />
                </td>
            </tr>
            <tr>
                <td align="center" width="110">
                    <input type="checkbox" name="c" />
                </td>
                <td align="center" width="100">
                    <input type="text" id="fno3" name="fno3" size="32" value="003"/>
                </td>
                <td align="center" width="360">
                    <input type="text" size="30" value="display"/>
                </td>
                <td align="center" width="130">
                    <input type="text" id="fqty3" name="fqty3" size="7" maxlength="7" value='400' onchange='chtotal(3);'/> 
 
                </td>
                <td align="center" width="130">
                    <input type="text" id="fprice3" name="fprice3" size="6" maxlength="6" value='0' onchange='chtotal(3);'/>
                </td>
                <td align="center" width="130">
                    <input type="text" id="ftotal3" name="ftotal3" size="8" readonly/>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6" >
                    <input type="button" name="delete_button" value="Delete" onclick="deleteAll('c');"/>
                </td>
            </tr>
            <tr class="totalsum">
                <td>
                    Total
                </td>
                <td colspan="4">
                </td>
                <td colspan="2" align='right'>
                    <b id="totalsum">0</b>
                </td>
                <td colspan="2">
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

读书人精选
热点排行