0

我有一个带有一个原型行的 html 表。原型行有几个 td，每个 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和名称。我在这里做错了吗？

谢谢！

4

2 回答 2

2

您不需要 ID：

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

现在，您可以根据需要多次克隆此标签，并且它会起作用。

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

于 2013-08-21T10:02:48.423 回答
0

Sorry to tell you, but everything seems fine with what you did. I tried the example you gave on IE and it seems to work.

If you inspect it with Developer Tools you still see the old id? what version of IE?

here is the code I tried:

<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>
于 2013-08-21T10:17:57.517 回答