Question

我有这个小提琴：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">

其中number是行的新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/

Answer 2

你可以尝试这个js代码。

场景： - 我正在使用在div内部克隆表的方案，并在点击删除克隆链接时删除克隆。

    <script>
    var count=1;
    function makeClone()
    {
    var $clone = $(".cloneTable:first").clone(true);

    $clone.find(':text,:file').each(function() {
            $(this).attr('id',($(this).attr("id")+count));
            $(this).val(' ');
        });
         $clone.find("a").each(function() {
              $(this).val('').attr('id', function(_, id) {
                return count;
              });
            });
         $clone.find("span").each(function() {
             $(this).attr({
                id: $(this).attr("id") + count
         });
        });
             $clone.attr( 'id', function() { 

                  return this.id + count; });
      //for use of datepicker 
      $clone.find('.myDate').removeClass('hasDatepicker').datepicker();

    $clone.appendTo('#addCarrierDiv');
    $('#Test'+count).html('<strong>Test '+(parseInt(count)+parseInt(1))+'</strong>');

    count=count+1;
}
    </script>

我在这里更新我的答案，提供删除克隆的代码。

$(document).ready(function(){

$('.removeClone').live('click',function() {

        var length=$('.cloneTable').length;
        if(length==1)
            {
            alert('There should be atleast one clone');
            return false;
            }


        var id = $(this).attr('id');
        var countVal=parseInt(id)+parseInt(1);
        $(this).closest('.cloneTable').remove();
         for(var removecount=parseInt(countVal);removecount<=length;removecount++)
            {
             $clone=jQuery("#maintable"+removecount);
             if(removecount==1)
                 {
                 $clone.find(':text,:file').each(function() {
                        var textId=$(this).attr("id");
                        var testVal=textId.replace(/[0-9]/g, '');
                        $(this).attr('id',testVal);

                    });

                 $clone.find("a").each(function() {
                        var textId=$(this).attr("id");
                        var testVal=textId.replace(/[0-9]/g, '');
                        $(this).attr('id',testVal+id);

                    });

                 $clone.find("span").each(function() {
                        var textId=$(this).attr("id");
                        var testVal=textId.replace(/[0-9]/g, '');
                        $(this).attr({
                         id: testVal
                     });
                         $(this).html('<strong>Test '+removecount+'</strong>');
                    });

                 $clone.attr( 'id', function() { 
                     var textId=$(this).attr("id");
                     var testVal=textId.replace(/[0-9]/g, '');
                      return (testVal);
                      });
                 id=parseInt(id)+parseInt(1);
            }  

             else
                 {
                $clone.find(':text,:file').each(function() {
                    var textId=$(this).attr("id");
                    var testVal=textId.replace(/[0-9]/g, '');
                    $(this).attr('id',testVal+id);

                });
                $clone.find("a").each(function() {
                    var textId=$(this).attr("id");
                    var testVal=textId.replace(/[0-9]/g, '');
                    $(this).attr('id',testVal+id);

                });

                $clone.find("span").each(function() {
                    var textId=$(this).attr("id");
                    var testVal=textId.replace(/[0-9]/g, '');

                    $(this).attr({
                     id: testVal+id
                 });
                     $(this).html('<strong>Test '+removecount+'</strong>');
                });

                 $clone.attr( 'id', function() { 
                     var textId=$(this).attr("id");
                     var testVal=textId.replace(/[0-9]/g, '');
                      return (testVal+id);
                      });
                 id=parseInt(id)+parseInt(1);
                 }
            } 
         count=parseInt(count)-parseInt(1);
    });
});

这项工作对我很好。希望这段代码可以帮到你。

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

2 个答案: