Jquery更改子元素的id_Jquery - Fatal编程技术网

Jquery更改子元素的id

jquery

Jquery更改子元素的id,jquery,Jquery,我正在创建一个新的行，如 var newRow = $(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val(''); 现在我想更改输入元素的id。怎么做？我在想 var i = gridInAnsLength; $('input', newRow).each(function() { $(this)[0].id = "Col" + counter + "_" + (i++)

我正在创建一个新的行，如

 var newRow = $(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val('');

现在我想更改输入元素的id。怎么做？我在想

var i = gridInAnsLength;
  $('input', newRow).each(function() {
    $(this)[0].id = "Col" + counter + "_" + (i++)
                 });

但它不起作用。请建议

我的html模型就像

<head>
    <script type="text/javascript" src="jquery-1.4.2.min.js">
    </script>
    <style type="text/css">
        div{ padding:4px; }
    </style>
</head>

<body>
    <script type="text/javascript">
        $(document).ready(

        function() {
            var counter = 2;
            $('a.add').live('click', function() {
                if (counter > 5) {
                    alert("Only 5 textboxes allowed");
                    return false;
                }
                var newRow =
                $(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val('');

                var i = 2;
                $('input', newRow).each(function() {
                    $(this).attr("id", "Col"+ (i++));

                });

                $(this).text('Remove').removeClass('add').addClass('remove');
                counter++;
            });
            $('a.remove').live('click', function() {
                $(this).closest('tr').remove();
                counter--;
            });
            $("#getButtonValue").click(function() {
                var gridInAnswerValuesHtml = "";
                $(".grdAns").each(function() {
                    //ansString += this.value+",";
                    gridInAnswerValuesHtml += "<input type = \"hidden\" name = \"gridInAnswers\" value = \"";
                    gridInAnswerValuesHtml += this.value;
                    gridInAnswerValuesHtml += "\">";
                });
                alert(gridInAnswerValuesHtml);

            });


        });
    </script>
    </head>

    <body>
        <table id="gridInAnswers">
            <tr>
                <th>
                    Min Value
                </th>
                <th>
                    Max Value
                </th>
            </tr>
            <tr>
                <td>
                    <input type="text" name="col1" id="Col1_2" class="grdAns" />
                </td>
                <td>
                    <input type="text" name="col1" id="Col1_3" class="grdAns" />
                </td>
                <td>
                    <a href="#" class="add">Add</a>
                </td>
            </tr>
            <tr>
                <input type='button' value='Get TextBox Value' id='getButtonValue'>
            </tr>
        </table>
    </body>


div{padding:4px；}
$（文件）。准备好了吗(
函数（）{
var计数器=2；
$（'a.add'）.live（'click'，function（））{
如果（计数器>5）{
警报（“仅允许5个文本框”）；
返回false；
}
var newRow=
$（this）.clone（'tr'）.clone（）.appendTo（'gridInAnswers'）.find（'input'）.val（''）；
var i=2；
$（'input'，newRow）.each（函数（）{
$（this.attr（“id”，“Col”+（i++））；
});
$（this）.text（'Remove'）.removeClass（'add'）.addClass（'Remove'）；
计数器++；
});
$（'a.remove'）.live（'click'，function（））{
$（this）.closest（'tr'）.remove（）；
计数器--；
});
$（“#getButtonValue”）。单击（函数（）{
var gridInAnswerValuesHtml=“”；
$（“.grdAns”）。每个（函数（）{
//ansString+=此.value+“，”；
GridInSwerValuesHTML+=“”；
});
警报（GridinaSwerValuesHTML）；
});
});
最小值
最大值

使用jquery的属性

您可以使用该方法设置id：

var i = gridInAnsLength;
$('input', newRow).each(function() {
    $(this).attr("id", "Col" + counter + "_" + (i++));
});

我已经改变了我的解决方案，我想这会解决你的问题。如果你同意，你需要改变两件事。首先将您的id格式更改为

id="Col_1_2"
id="Col_1_3"

第二，将javascript代码替换为

    function() {
        var counter = 2;
        $('a.add').live('click', function() {
            if (counter > 5) {
                alert("Only 5 textboxes allowed");
                return false;
            }
            //var newRow=$(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val('');

            var newRowHTML = $(this).closest('tr').clone()[0].outerHTML;
            var theClone = $(this).closest('tr').clone().find('input');
            $(theClone).each(function(){
                var TheID = $(this).attr("id").split('_');
                newRowHTML=newRowHTML.replace($(this).attr("id"),TheID[0]+"_"+(parseInt(TheID[1])+1)+"_"+TheID[2]);

            });
            var newRow = $(newRowHTML).appendTo('#gridInAnswers').find('input').val('');
            var i = 2;

            $(this).text('Remove').removeClass('add').addClass('remove');
            counter++;
        });
        $('a.remove').live('click', function() {
            $(this).closest('tr').remove();
            counter--;
        });
        $("#getButtonValue").click(function() {
            var gridInAnswerValuesHtml = "";
            $(".grdAns").each(function() {
                //ansString += this.value+",";
                gridInAnswerValuesHtml += "<input type = \"hidden\" name = \"gridInAnswers\" value = \"";
                gridInAnswerValuesHtml += this.value;
                gridInAnswerValuesHtml += "\">";
            });
            alert(gridInAnswerValuesHtml);
        });
    }

function（）{
var计数器=2；
$（'a.add'）.live（'click'，function（））{
如果（计数器>5）{
警报（“仅允许5个文本框”）；
返回false；
}
//var newRow=$（this）.clone（）.appendTo（'#gridInAnswers'）.find（'input'）.val（''）；
var newRowHTML=$（this）.clone（'tr'）.clone（）[0].outerHTML；
var theClone=$（this.close（'tr'）.clone（）.find（'input'）；
$（克隆）。每个（函数（）{
var TheID=$（this.attr（“id”）.split（“uuz”）；
newRowHTML=newRowHTML.replace（$（this.attr（“id”）），TheID[0]+“”+（parseInt（TheID[1]）+1）+“”+TheID[2]）；
});
var newRow=$（newRowHTML）.appendTo（'#gridInAnswers'）.find（'input'）.val（''）；
var i=2；
$（this）.text（'Remove'）.removeClass（'add'）.addClass（'Remove'）；
计数器++；
});
$（'a.remove'）.live（'click'，function（））{
$（this）.closest（'tr'）.remove（）；
计数器--；
});
$（“#getButtonValue”）。单击（函数（）{
var gridInAnswerValuesHtml=“”；
$（“.grdAns”）。每个（函数（）{
//ansString+=此.value+“，”；
GridInSwerValuesHTML+=“”；
});
警报（GridinaSwerValuesHTML）；
});
}

我相信这会解决你的问题。请不要忘记投票，如果它有帮助，也不要忘记标记为答案，如果它解决了你的问题。谢谢！：）

你能用代码上面的10101或cntr结来格式化代码吗？ID不是唯一的，在一个tr中是唯一的，但在下一个tr中会重复tr@oddoneout，您的意思是上面的代码就是这样做的，或者您所说的一般代码，明确地说ID应该是unique@oddoneout，将i值打印在上面或初始化为var i=0左右，我认为它不是递增的…@gov ya，但它没有进入函数even@OddOneOut您好，您有一个样本的html布局为这你介意我看看它，看看我是否可以找到一些解决办法。谢谢！：）

    function() {
        var counter = 2;
        $('a.add').live('click', function() {
            if (counter > 5) {
                alert("Only 5 textboxes allowed");
                return false;
            }
            //var newRow=$(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val('');

            var newRowHTML = $(this).closest('tr').clone()[0].outerHTML;
            var theClone = $(this).closest('tr').clone().find('input');
            $(theClone).each(function(){
                var TheID = $(this).attr("id").split('_');
                newRowHTML=newRowHTML.replace($(this).attr("id"),TheID[0]+"_"+(parseInt(TheID[1])+1)+"_"+TheID[2]);

            });
            var newRow = $(newRowHTML).appendTo('#gridInAnswers').find('input').val('');
            var i = 2;

            $(this).text('Remove').removeClass('add').addClass('remove');
            counter++;
        });
        $('a.remove').live('click', function() {
            $(this).closest('tr').remove();
            counter--;
        });
        $("#getButtonValue").click(function() {
            var gridInAnswerValuesHtml = "";
            $(".grdAns").each(function() {
                //ansString += this.value+",";
                gridInAnswerValuesHtml += "<input type = \"hidden\" name = \"gridInAnswers\" value = \"";
                gridInAnswerValuesHtml += this.value;
                gridInAnswerValuesHtml += "\">";
            });
            alert(gridInAnswerValuesHtml);
        });
    }