在Jquery中为文本和日历控件生成ID(Generate ID's for text and calendar control in Jquery)

在Jquery中为文本和日历控件生成ID(Generate ID's for text and calendar control in Jquery)

每当我点击.add类时，我想为输入类型text生成Id's 。 目前每当我点击.add类时，它会为每个输入控件生成相同名称的id。 所以在添加数据时它不能正常工作。

那么，每当我点击.add类时，我应该如何为每个文本生成ID。 请建议。

这是什么产生。

生成的HTML

$('.add').on('click', function() {
  var $tr = $(this).closest('tr');
  var $tr2 = $tr.clone(true, true);
  $tr2.find(".vendorName").children('label').remove();
  $tr2.find(".vendorFromDate").children('label').remove();
  $tr2.find(".vendorToDate").children('label').remove();
  $tr2.find(".vendorName").children().unwrap();
  $tr2.find(".vendorFromDate").children().unwrap();
  $tr2.find(".vendorToDate").children().unwrap();
  $tr2.insertAfter($tr);
}); 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <div class="row noPadding vendorForm">
      <div class="vendorDaterow">
        <div class="vendorName" id="dvVendorNameData">
          <label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName1" /></span>
        </div>
        <div class="vendorFromDate">
          <label>From Date</label><span class="datepicker"><input type="text" name="nmVendorData" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
        <div class="vendorToDate">
          <label>To Date</label><span class="datepicker"><input type="text" name="nmVendorData" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="add">
        <i class="fa fa-plus" aria-hidden="true"></i>
      </div>
      <i class="max">(Maximum 5 Vendors)</i>

    </div>
  </td>
</tr> 
  
 
 
 请建议我应该如何生成动态ID。 
I want to generate Id's for input type text whenever I click on .add class. Currently Whenever I click on .add class it generates the id's with same name for each input control. So while adding data it does not work properly.
 
So how should I generate ID's for each text whenever I click on .add class. Please suggest.
 
Here is what is generates.
 
Generated HTML
 
 
 
  
  
$('.add').on('click', function() {
  var $tr = $(this).closest('tr');
  var $tr2 = $tr.clone(true, true);
  $tr2.find(".vendorName").children('label').remove();
  $tr2.find(".vendorFromDate").children('label').remove();
  $tr2.find(".vendorToDate").children('label').remove();
  $tr2.find(".vendorName").children().unwrap();
  $tr2.find(".vendorFromDate").children().unwrap();
  $tr2.find(".vendorToDate").children().unwrap();
  $tr2.insertAfter($tr);
}); 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <div class="row noPadding vendorForm">
      <div class="vendorDaterow">
        <div class="vendorName" id="dvVendorNameData">
          <label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName1" /></span>
        </div>
        <div class="vendorFromDate">
          <label>From Date</label><span class="datepicker"><input type="text" name="nmVendorData" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
        <div class="vendorToDate">
          <label>To Date</label><span class="datepicker"><input type="text" name="nmVendorData" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="add">
        <i class="fa fa-plus" aria-hidden="true"></i>
      </div>
      <i class="max">(Maximum 5 Vendors)</i>

    </div>
  </td>
</tr> 
  
 
 
Please suggest how should I generate the dynamic ID.
                
最满意答案
                
                    
                        
 检查这个 
 
 
 
  
  
(function () {
  var toAddCloneCount = 2;

$('.add').on('click', function() {
  var $tr = $(this).closest('tr');
  var $tr2 = $tr.clone(true, true);
  $tr2.find(".vendorName").children('label').remove();
  $tr2.find(".add").children().remove();
  $tr2.find(".vendorFromDate").children('label').remove();
  $tr2.find(".vendorToDate").children('label').remove();
  $tr2.find('#txtVendorName').prop('id', 'txtVendorName' + toAddCloneCount);
  $tr2.find('#spFromDate1').prop('id', 'spFromDate' + toAddCloneCount);
  $tr2.find('#spToDate1').prop('id', 'spToDate' + toAddCloneCount++);
  $tr2.insertAfter($tr);
});
})(); 
  
.vendorName,.vendorFromDate,.vendorToDate{
width:33%;float:left;} 
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
                            <td>
                                <div class="row noPadding vendorForm">
                                    <div class="vendorDaterow">
                                        <div class="vendorName">
                                            <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" name="nmVendorData" id="txtVendorName" /></span> 
                                        </div>
                                        <div class="vendorFromDate">
                                            <label>From Date</label><span class="datepicker"><input type="text" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                        <div class="vendorToDate">
                                            <label>To Date</label><span class="datepicker"><input type="text" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        &t;/div>
                                    </div>
                                    <div class="add">
                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                    </div>
                                    <i class="max">(Maximum 5 Vendors)</i>

                                </div>
                            </td>
                        </tr>
</table> 
  
 
Check this
 
 
 
  
  
(function () {
  var toAddCloneCount = 2;

$('.add').on('click', function() {
  var $tr = $(this).closest('tr');
  var $tr2 = $tr.clone(true, true);
  $tr2.find(".vendorName").children('label').remove();
  $tr2.find(".add").children().remove();
  $tr2.find(".vendorFromDate").children('label').remove();
  $tr2.find(".vendorToDate").children('label').remove();
  $tr2.find('#txtVendorName').prop('id', 'txtVendorName' + toAddCloneCount);
  $tr2.find('#spFromDate1').prop('id', 'spFromDate' + toAddCloneCount);
  $tr2.find('#spToDate1').prop('id', 'spToDate' + toAddCloneCount++);
  $tr2.insertAfter($tr);
});
})(); 
  
.vendorName,.vendorFromDate,.vendorToDate{
width:33%;float:left;} 
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
                            <td>
                                <div class="row noPadding vendorForm">
                                    <div class="vendorDaterow">
                                        <div class="vendorName">
                                            <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" name="nmVendorData" id="txtVendorName" /></span> 
                                        </div>
                                        <div class="vendorFromDate">
                                            <label>From Date</label><span class="datepicker"><input type="text" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                        <div class="vendorToDate">
                                            <label>To Date</label><span class="datepicker"><input type="text" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                    </div>
                                    <div class="add">
                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                    </div>
                                    <i class="max">(Maximum 5 Vendors)</i>

                                </div>
                            </td>
                        </tr>
</table> 
  
 
在Jquery中为文本和日历控件生成ID(Generate ID's for text and calendar control in Jquery)

                
 每当我点击.add类时，我想为输入类型text生成Id's 。 目前每当我点击.add类时，它会为每个输入控件生成相同名称的id。 所以在添加数据时它不能正常工作。 
 
 那么，每当我点击.add类时，我应该如何为每个文本生成ID。 请建议。 
 
 这是什么产生。 
 
 生成的HTML 
 
 
 
  
  
$('.add').on('click', function() {
  var $tr = $(this).closest('tr');
  var $tr2 = $tr.clone(true, true);
  $tr2.find(".vendorName").children('label').remove();
  $tr2.find(".vendorFromDate").children('label').remove();
  $tr2.find(".vendorToDate").children('label').remove();
  $tr2.find(".vendorName").children().unwrap();
  $tr2.find(".vendorFromDate").children().unwrap();
  $tr2.find(".vendorToDate").children().unwrap();
  $tr2.insertAfter($tr);
}); 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <div class="row noPadding vendorForm">
      <div class="vendorDaterow">
        <div class="vendorName" id="dvVendorNameData">
          <label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName1" /></span>
        </div>
        <div class="vendorFromDate">
          <label>From Date</label><span class="datepicker"><input type="text" name="nmVendorData" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
        <div class="vendorToDate">
          <label>To Date</label><span class="datepicker"><input type="text" name="nmVendorData" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="add">
        <i class="fa fa-plus" aria-hidden="true"></i>
      </div>
      <i class="max">(Maximum 5 Vendors)</i>

    </div>
  </td>
</tr> 
  
 
 
 请建议我应该如何生成动态ID。 
I want to generate Id's for input type text whenever I click on .add class. Currently Whenever I click on .add class it generates the id's with same name for each input control. So while adding data it does not work properly.
 
So how should I generate ID's for each text whenever I click on .add class. Please suggest.
 
Here is what is generates.
 
Generated HTML
 
 
 
  
  
$('.add').on('click', function() {
  var $tr = $(this).closest('tr');
  var $tr2 = $tr.clone(true, true);
  $tr2.find(".vendorName").children('label').remove();
  $tr2.find(".vendorFromDate").children('label').remove();
  $tr2.find(".vendorToDate").children('label').remove();
  $tr2.find(".vendorName").children().unwrap();
  $tr2.find(".vendorFromDate").children().unwrap();
  $tr2.find(".vendorToDate").children().unwrap();
  $tr2.insertAfter($tr);
}); 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <div class="row noPadding vendorForm">
      <div class="vendorDaterow">
        <div class="vendorName" id="dvVendorNameData">
          <label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName1" /></span>
        </div>
        <div class="vendorFromDate">
          <label>From Date</label><span class="datepicker"><input type="text" name="nmVendorData" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
        <div class="vendorToDate">
          <label>To Date</label><span class="datepicker"><input type="text" name="nmVendorData" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="add">
        <i class="fa fa-plus" aria-hidden="true"></i>
      </div>
      <i class="max">(Maximum 5 Vendors)</i>

    </div>
  </td>
</tr> 
  
 
 
Please suggest how should I generate the dynamic ID.
                
最满意答案
                
                    
                        
 检查这个 
 
 
 
  
  
(function () {
  var toAddCloneCount = 2;

$('.add').on('click', function() {
  var $tr = $(this).closest('tr');
  var $tr2 = $tr.clone(true, true);
  $tr2.find(".vendorName").children('label').remove();
  $tr2.find(".add").children().remove();
  $tr2.find(".vendorFromDate").children('label').remove();
  $tr2.find(".vendorToDate").children('label').remove();
  $tr2.find('#txtVendorName').prop('id', 'txtVendorName' + toAddCloneCount);
  $tr2.find('#spFromDate1').prop('id', 'spFromDate' + toAddCloneCount);
  $tr2.find('#spToDate1').prop('id', 'spToDate' + toAddCloneCount++);
  $tr2.insertAfter($tr);
});
})(); 
  
.vendorName,.vendorFromDate,.vendorToDate{
width:33%;float:left;} 
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
                            <td>
                                <div class="row noPadding vendorForm">
                                    <div class="vendorDaterow">
                                        <div class="vendorName">
                                            <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" name="nmVendorData" id="txtVendorName" /></span> 
                                        </div>
                                        <div class="vendorFromDate">
                                            <label>From Date</label><span class="datepicker"><input type="text" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                        <div class="vendorToDate">
                                            <label>To Date</label><span class="datepicker"><input type="text" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        &t;/div>
                                    </div>
                                    <div class="add">
                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                    </div>
                                    <i class="max">(Maximum 5 Vendors)</i>

                                </div>
                            </td>
                        </tr>
</table> 
  
 
Check this
 
 
 
  
  
(function () {
  var toAddCloneCount = 2;

$('.add').on('click', function() {
  var $tr = $(this).closest('tr');
  var $tr2 = $tr.clone(true, true);
  $tr2.find(".vendorName").children('label').remove();
  $tr2.find(".add").children().remove();
  $tr2.find(".vendorFromDate").children('label').remove();
  $tr2.find(".vendorToDate").children('label').remove();
  $tr2.find('#txtVendorName').prop('id', 'txtVendorName' + toAddCloneCount);
  $tr2.find('#spFromDate1').prop('id', 'spFromDate' + toAddCloneCount);
  $tr2.find('#spToDate1').prop('id', 'spToDate' + toAddCloneCount++);
  $tr2.insertAfter($tr);
});
})(); 
  
.vendorName,.vendorFromDate,.vendorToDate{
width:33%;float:left;} 
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
                            <td>
                                <div class="row noPadding vendorForm">
                                    <div class="vendorDaterow">
                                        <div class="vendorName">
                                            <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" name="nmVendorData" id="txtVendorName" /></span> 
                                        </div>
                                        <div class="vendorFromDate">
                                            <label>From Date</label><span class="datepicker"><input type="text" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                        <div class="vendorToDate">
                                            <label>To Date</label><span class="datepicker"><input type="text" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                    </div>
                                    <div class="add">
                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                    </div>
                                    <i class="max">(Maximum 5 Vendors)</i>

                                </div>
                            </td>
                        </tr>
</table>