Question

我正在创建一个新行，如

 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>

Answer 1

使用jquery的attr

http://api.jquery.com/attr/

$('#yourold').attr('id', 'newid');

Answer 2

您可以使用attr()方法设置ID：

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

Answer 3

我已经改变了我的解决方案，我认为这将解决您的问题。如果可以，你需要更改2件事。首先将您的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);
        });
    }

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

Jquery更改子元素的id

3 个答案: