求解 jquery删除行name值得排序问题

nfclass 2011-06-24 09:07:18

以下代码动态添加行，第二行开始每一列的input的name值都是按照qq1、qq2、qq3这样排序的。

问题：
如果删除第三行，name的排序是qq1 qq3 qq4。
删除中间的几行每列的input如何继续按照qq1、qq2、qq3这样的顺序?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <script type="text/javascript" language="javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //隐藏模板tr

            //$("#tb tr").eq(2).hide();

            var i = 1;

            $("#BtAdd").click(function () {

                //复制一行

                var tr = $("#tb tr").eq(1).clone();

                tr.find("td").get(0).innerHTML = ++i;

                var inputs = tr.get(0).getElementsByTagName("input");

                for(var j = 0 ; j < inputs.length; j ++)

                {

                    inputs[j].name = inputs[j].name+(i-1)

                    alert(inputs[j].name);

                }

                tr.show();

                tr.appendTo("#tb");

            });





            $("#BtDel").click(function () {

                $("#tb tr:gt(1)").each(function () {

                    if ($(this).find("#CK").get(0).checked == true) {

                        $(this).remove();

                    }

                });

                i = 1;

                $("#tb tr:gt(1)").each(function () {

                    $(this).find("td").get(0).innerHTML = ++i;

                });

                $("#CKA").attr("checked", false);

            });

            $("#CKA").click(function () {

                $("#tb tr:gt(1)").each(function () {

                    $(this).find("#CK").get(0).checked = $("#CKA").get(0).checked;

                });

            });

        })

    </script>

 </HEAD>



 <BODY>

  <table border="1" id="tb">

                        <tr>

                        <td style="text-align: center"></td>

                        <td><input id="CKA" name="CKA" type="checkbox"/></td>

                        <td>网</td>                        </tr>

                        <tr>

                        <td style="text-align: center">1</td>

                        <td><input id="CK" type="checkbox" name="CK"/></td>

                        <td><INPUT class="INPUT" TYPE="text" NAME="qq"></td>

                        </tr>

                    </table>



                    <td width="50%" align="center">

                            <input id="BtAdd" type="button" value="添加行" Class="Btn"/> 

                            <input id="BtDel" type="button" value="删除行"  Class="Btn"/>

                        </td>

 </BODY>

</HTML>

...全文

133 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

nfclass 2011-06-24

打赏
举报

[Quote=引用 8 楼 aspwebchh 的回复:]

哪里的超链接啊?
[/Quote]

测试发现for循环这段脚本有问题，导致frame框架的链接打开新窗口

for(var i =0; i < ipts.length; i ++)
{
name = ipts[i].name;
name = name.replace(/\d+/,parseInt(index)-1);
ipts[i].name = name;
}

nfclass 2011-06-24

打赏
举报

[Quote=引用 8 楼 aspwebchh 的回复:]
哪里的超链接啊?
[/Quote]

frame框架内的超链接全部变成打开新窗口了，原来不是。
不知道是不是用了这段代码的原因？

另外 var ipts = next.getElementsByTagName("input");
只能取input的元素，
select是要再写一个吗？ var sels = next.getElementsByTagName("select");

挨踢直男 2011-06-24

打赏
举报

哪里的超链接啊?

nfclass 2011-06-24

打赏
举报

[Quote=引用 6 楼 aspwebchh 的回复:]
HTML code
$(document).ready(function () {
//隐藏模板tr
//$("#tb tr").eq(2).hide();
var i = 1;
$("#BtAdd").click(function () {
……
[/Quote]

喔!哈哈这才是我想要的结果。
aspwebchh 测试还有点小问题，所有超链接都变成打开新窗口了，这是那句代码有问题呢？

挨踢直男 2011-06-24

打赏
举报

        $(document).ready(function () {

            //隐藏模板tr

            //$("#tb tr").eq(2).hide();

            var i = 1;

            $("#BtAdd").click(function () {

                //复制一行

                var tr = $("#tb tr").eq(1).clone();

                tr.find("td").get(0).innerHTML = ++i;

                var inputs = tr.get(0).getElementsByTagName("input");

                for(var j = 0 ; j < inputs.length; j ++)

                {

                    inputs[j].name = inputs[j].name+(i-1)

                    alert(inputs[j].name);

                }

                tr.show();

                tr.appendTo("#tb");

            });





            $("#BtDel").click(function () {

                $("#tb tr:gt(1)").each(function () {

                    if ($(this).find("#CK").get(0).checked == true) {

                        resetIndex(this)

                        $(this).remove();

                    }

                });

                i = 1;

                $("#tb tr:gt(1)").each(function () {

                    $(this).find("td").get(0).innerHTML = ++i;

                });

                $("#CKA").attr("checked", false);

            });

            $("#CKA").click(function () {

                $("#tb tr:gt(1)").each(function () {

                    $(this).find("#CK").get(0).checked = $("#CKA").get(0).checked;

                });

            });

        })

        

        function resetIndex(tr)

        {

             var index = tr.getElementsByTagName("td")[0].innerHTML;

             var next = tr.nextSibling

             if(!next) return false;

             var ipts = next.getElementsByTagName("input");

             for(var i =0; i < ipts.length; i ++)

             {

                 name = ipts[i].name;

                 name = name.replace(/\d+/,parseInt(index)-1);

                 ipts[i].name = name;

             }

             resetIndex(next);

        }

zell419 2011-06-24

打赏
举报

[Quote=引用 4 楼 nfclass 的回复:]

引用 3 楼 zell419 的回复:

HTML code

$("#BtDel").click(function () {
$("#tb tr:gt(0)").each(function () {
if ($(this).find("#CK").get(0).checked == true) {
$(this).……

zell419 可能我没说明白，第二行开始只要修……
[/Quote]
哦哦。其实我那个把innerHTML中所有的数字都替换也不是很好，怕当中还有其他地方需要用到数字。
反正就是在单击删除的时候对行遍历，重新组织下。

nfclass 2011-06-24

打赏
举报

[Quote=引用 3 楼 zell419 的回复:]

HTML code

$("#BtDel").click(function () {
$("#tb tr:gt(0)").each(function () {
if ($(this).find("#CK").get(0).checked == true) {
$(this).……
[/Quote]

zell419 可能我没说明白，第二行开始只要修改 <INPUT class="INPUT" TYPE="text" NAME="qq"> 中 NAME="qq"就可以了按照qq1 , qq2 ,qq3 这样排序下去

zell419 2011-06-24

打赏
举报



$("#BtDel").click(function () {

                $("#tb tr:gt(0)").each(function () {

                    if ($(this).find("#CK").get(0).checked == true) {

                        $(this).remove();

                    }

                });

                i = 1;

                $("#tb tr:gt(0)").each(function (i) {

                    $(this).html($(this).html().replace(/\d/g,i+1));

                    

                });

                $("#CKA").attr("checked", false);

            });