クローンテーブルの行の機能を拡張する - 私がこのバイオリンを有する行ID

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> 

Iは最初の行を複製する場合、新しい行のIDを次のように変更する必要があります

<tr id="emlRow_1"> 

wh ereは行の新しいIDです。

誰かがこれを行う方法を教えてもらえますか？

Answer 1

は、たぶん私は何かが欠けていますが、これはID属性を設定するのと同じくらい簡単でなければなりません：

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

---

UPDATES

VARカウント= $（ "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); 
    }); 
}); 

この作品はうまくいきます。このコードはお役に立ちますか？