Question

我有一个带有一个原型行的html表。原型行有几个tds，每个td都有输入元素。我试图克隆行并分配唯一的ID和名称。但在Fire fox中，新的id和名称被正确分配。但在IE中，唯一的ID和名称未分配。这种逻辑在FF中运行良好。但在IE7中它不起作用。

html表：

<table class="myTable">
 <tr class="prototype">
    <td>
       <label for="myValue1">MY Value ONE:</label><br>
    <input class="required email" id="myValue1" type="text" value="" name="myValue1">
    </td>
     <td>
       <label for="myValue2">MY Value TWO:</label><br>
    <input class="required email" id="myValue2" type="text" value="" name="myValue2">
    </td>
     <td>
       <label for="myValue3">MY Value THREE:</label><br>
    <input class="required email" id="myValue3" type="text" value="" name="myValue3">
    </td>
    <td>
       <label for="myValue4">MY Value FOUR:</label><br>
    <input class="required email" id="myValue4" type="text" value="" name="myValue4">
    </td> 
 </tr>

</table>

JQuery代码：

$("#new").click(function(e) {
        e.preventDefault();
               var d = new Date();
        var counter = d.getTime(); 
        var master = $("table.myTable");
        var prot = master.find("tr.prototype").clone();
        prot.removeClass('prototype');
        prot.addClass("contact");
        prot.find("#myValue1").attr('id',"myValue1"+counter);
        prot.find("#myValue2").attr('id',"myValue2"+counter);
        prot.find("#myValue3").attr('id',"myValue3"+counter);
        prot.find("#myValue4").attr('id',"myValue4"+counter);

        prot.find("#myValue1"+counter).attr('name',"myValue1"+counter);
        prot.find("#myValue2"+counter).attr('name',"myValue2"+counter);
        prot.find("#myValue3"+counter).attr('name',"myValue3"+counter);
        prot.find("#myValue4"+counter).attr('name',"myValue4"+counter);

            jQuery('table.myTable tr:last').before(prot);

    });

但是上面的代码中没有指定唯一ID和名称。我在这里做错了什么？

谢谢！

Answer 1

您不需要ID：

<label>MY Value ONE:<br /><input class="required email" type="text" name="myValue1[]" /></label>

现在你可以根据需要多次克隆这个标签，它会起作用。

在服务器端，您可以作为数组访问（例如在PHP中）$_POST['myValue1']。

Answer 2

很抱歉告诉你，但你所做的一切似乎都很好。我尝试了你在IE上给出的例子，它似乎有效。

如果您使用开发人员工具进行检查，您仍会看到旧的ID？什么版本的IE？

这是我试过的代码：

<html>
<head>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>


$(function() {
    $("#new").click(function(e) {

        e.preventDefault();
        var d = new Date();
        var counter = d.getTime(); 
        var master = $("table.myTable");
        var prot = master.find("tr.prototype").clone();
        prot.removeClass('prototype');
        prot.addClass("contact");

        //$(prot.find("input")[0])
        prot.find("#myValue1").attr('id',"myValue1"+counter);
        prot.find("#myValue2").attr('id',"myValue2"+counter);
        prot.find("#myValue3").attr('id',"myValue3"+counter);
        prot.find("#myValue4").attr('id',"myValue4"+counter);

        prot.find("#myValue1"+counter).attr('name',"myValue1"+counter);
        prot.find("#myValue2"+counter).attr('name',"myValue2"+counter);
        prot.find("#myValue3"+counter).attr('name',"myValue3"+counter);
        prot.find("#myValue4"+counter).attr('name',"myValue4"+counter);

            jQuery('table.myTable tr:last').before(prot);
        counter++;
    });
});

</script>
</head>
<body>

<table class="myTable">
 <tr class="prototype">
    <td>
       <label for="myValue1">MY Value ONE:</label><br>
    <input class="required email" id="myValue1" type="text" value="" name="myValue1">
    </td>
     <td>
       <label for="myValue2">MY Value TWO:</label><br>
    <input class="required email" id="myValue2" type="text" value="" name="myValue2">
    </td>
     <td>
       <label for="myValue3">MY Value THREE:</label><br>
    <input class="required email" id="myValue3" type="text" value="" name="myValue3">
    </td>
    <td>
       <label for="myValue4">MY Value FOUR:</label><br>
    <input class="required email" id="myValue4" type="text" value="" name="myValue4">
    </td> 
 </tr>

</table>

<input type="button" id="new" />

</body>
</html>

分配唯一的ID和名称？

html表：

JQuery代码：

2 个答案: