扩展克隆表行功能-更改行ID [英] Extending Clone Table Rows functionality - changing row ID

问题描述

我在以下位置提琴: http://jsfiddle.net/radi8/EwQUW/33/

请注意，已定义初始表为:

Notice that the initial table is defined is:

<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="[e-mail]" 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更改为

When I clone the first row, I need to change the ID of the new row to something like

<tr id="emlRow_1">

其中数字是该行的新ID.

where the number is the new ID of the row.

有人可以指导我如何做吗?

Can someone guide me on how to do this?

推荐答案

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

Maybe I'm missing something but this should be as easy as setting the ID attribute:

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

---

更新

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

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/

这篇关于扩展克隆表行功能-更改行ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！