jquery - 扩展克隆表行功能 - 更改行 ID

Question

我有这个 fiddle :http://jsfiddle.net/radi8/EwQUW/33/

请注意，初始表的定义是:

<table class="reference" width="100%" border="1" align=left id="secondaryEmails">
<thead>
    <tr>
        <th width="30%">SelectRow</th>
        <th width="40%">Email</th>
        <th width="30%">Ship Type</th>
    </tr>
</thead>
<tbody>
    <tr id="template" style="display:none">
        <td align="center">
            <input type=radio id="index_" name = "index" value="0">
        </td>
        <td align="center">
            <input type="text" id="email_" name ="email_" value="" size=40>
        </td>
        <td align="center">
            <select style=width:150 id="shipType_" name="shipType_">
                <option value="0" "selected">Both</option>
                <option value="1">Over Road</option>          
                <option value="2">Over Rail</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="center">
            <input type=radio id="index_2" name = "index" value="2">
        </td>
        <td align="center">
            <input type="text" id="email_2" name ="email_2" value="eml@domain.com" size=40>
        </td>
        <td align="center">
            <select style=width:150 name="shipType_2" id="shipType_2">
                <option value="0" >Both</option>
                <option value="1" >Over Road</option>
                <option value="2" selected>Over Rail</option>
            </select>
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th align="center">
            <button id='Add'>Add Row</button>
        </th>
        <th>&nbsp;</th>
        <th align="center">
            <button id='update'>Update</button>
        </th>
    </tr>
</tfoot>

当我克隆第一行时，我需要将新行的 ID 更改为类似

<tr id="emlRow_1">

其中数字是该行的新 ID。

有人可以指导我如何执行此操作吗？

Answer 1

也许我遗漏了一些东西，但这应该像设置 ID 属性一样简单:

var $clone = $("#template").clone();
var index = $("table.reference tr:not(.template)").length;
$clone.attr("id", "emlRow_" + index);

<小时/>

更新

var count = $("table.reference tr").length;

$("#Add").click(function() {
    count++;
    var $clone = $("#secondaryEmails tbody tr:first").clone();
    $clone.attr({
        id: "emlRow_" + count,
        name: "emlRow_" + count,
        style: "" // remove "display:none"
    });
    $clone.find("input,select").each(function(){
        $(this).attr({
            id: $(this).attr("id") + count,
            name: $(this).attr("name") + count
        });
    });
    $("#secondaryEmails tbody").append($clone);
});

工作示例:http://jsfiddle.net/hunter/EwQUW/35/