從表格行

中創建的每個新「選擇選項」中選擇並顯示值到目前爲止，我無法找到解決以下問題的解決方案。如果有人能夠幫助我，我會很開心。從表格行

我有一個簡單的表，有1個選擇框和一個文本框。我使用jQuery腳本添加按鈕添加表格行。同樣有刪除選項。

我的目標是顯示每行中的選定名稱。但是，當我添加行並選擇「選擇選項」時，名稱會更改爲每行。這不是在這裏。

這裏是提琴鏈接進行測試 - https://jsfiddle.net/rmse9nw3/

<table id="datagrid" class="display table1">

<th>Employee Code</th> 
    <th>Employee Name</th>

<tr id="row1"> 
    <td > 
    <select name="empid" class="dropdn"> 
     <option>Please select...</option> 
     <option>Jhon Doe</option> 
     <option>George Antony</option> 
     <option>David Blare</option> 
     <option>Kene Roy</option> 
    </select> 

    </td> 

    <td> 
     <input type='text' readonly name="name" size="20" class="name" value=""/> 
    </td> 
    <td> 
     <input type="button" name="addRow" class="add" value='Add'/> 
    </td> 
    <td> 
     <input type="button" name="removeRow" class="removeRow" value='Delete'/> 
    </td>

和jQuery是 -

$(document).ready(function() { 

    $(document).on('click','#datagrid .add',function() { 

      var row=$(this).closest('tr'); 
      var clone = row.clone(); 
      var tr= clone.closest('tr'); 
      tr.find('input[type=text]').val(''); 
      $(this).closest('tr').after(clone); 
      var $span=$("#datagrid tr"); 
      $span.attr('id',function (index) { 
      return 'row' + index; 

     }); 

    }); 

    $(document).on('click','#datagrid .removeRow',function() { 
     if ($('#datagrid .add').length > 1) { 
      $(this).closest('tr').remove(); 
     } 

    }); 

}); 

var dropDown = ".dropdn"; 
var empName = ".name"; 

$(document).on("change",(dropDown),function(e){ 

    var value = $.trim($(this).val()); 

    $(empName).val(value); 

});

來源

2017-05-08 Amit

的選擇.name，會在文檔中選擇所有領域類屬性等於name，所以當你爲它設置一個新值時，它將改變每個字段.name。

要改變只有「正確」的名字，你可以修改下面一行：

$(empName).val(value);

到

$(this).closest('tr').find(empName).val(value);

，以獲得的相同tr只有輸入字段nameselect元素。

請參見下面的代碼片段（其中我只修改了上面的線），請：

(function($) { 
 
\t // always strict mode on 
 
\t // cannot use undefined vars on strict mode 
 
\t "use strict"; 
 

 
\t $(document).ready(function() { 
 
\t \t 
 
\t \t $(document).on('click','#datagrid .add',function() { 
 
\t 
 
\t \t \t var row=$(this).closest('tr'); 
 
\t \t \t var clone = row.clone(); 
 
\t \t \t var tr= clone.closest('tr'); 
 
\t \t \t tr.find('input[type=text]').val(''); 
 
\t \t \t $(this).closest('tr').after(clone); 
 
\t \t \t var $span=$("#datagrid tr"); 
 
\t \t \t $span.attr('id',function (index) { 
 
\t \t \t return 'row' + index; 
 
\t \t  
 
\t \t \t }); 
 
\t \t \t 
 
\t \t }); 
 
\t \t 
 
\t \t $(document).on('click','#datagrid .removeRow',function() { 
 
\t \t \t if ($('#datagrid .add').length > 1) { 
 
\t \t \t \t $(this).closest('tr').remove(); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t }); 
 
\t \t 
 
\t }); 
 

 
\t var dropDown = ".dropdn"; 
 
\t var empName = ".name"; 
 
\t 
 
    $(document).on("change",(dropDown),function(e){ 
 
\t \t 
 
\t \t var value = $.trim($(this).val()); 
 
\t \t 
 
    //Change this line: 
 
\t //$(empName).val(value); 
 
    //To: 
 
    $(this).closest('tr').find(empName).val(value); 
 
\t \t 
 
\t }); 
 
\t 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="datagrid" class="display table1"> 
 
<thead> 
 
    <tr> 
 
     <th>Employee Code</th> 
 
     <th>Employee Name</th> 
 
    </tr> 
 
</thead> 
 

 
<tbody id="dataTable"> 
 

 
    <tr id="row1"> 
 
     <td > 
 
     <select name="empid" class="dropdn"> 
 
      <option>Please select...</option> 
 
      <option>Jhon Doe</option> 
 
      <option>George Antony</option> 
 
      <option>David Blare</option> 
 
      <option>Kene Roy</option> 
 
     </select> 
 
     
 
     </td> 
 

 
     <td> 
 
      <input type='text' readonly name="name" size="20" class="name" value=""/> 
 
     </td> 
 
     <td> 
 
      <input type="button" name="addRow" class="add" value='Add'/> 
 
     </td> 
 
     <td> 
 
      <input type="button" name="removeRow" class="removeRow" value='Delete'/> 
 
     </td> 
 
     
 
    </tr> 
 
       
 
</tbody> 
 

 
</table>

我希望這是明確的，再見。

更新，回答新問題，如何添加選項dinamically：

$.each([ 
 
    { id : 1, name : "Jhon Doe"}, 
 
    { id : 2, name : "George Antony"}, 
 
    { id : 3, name : "David Blare"}, 
 
    { id : 4, name : "Kene Roy"} 
 
], function(index, value) { 
 
    $('#empid').append($('<option>', 
 
    { 
 
     value: value["id"], 
 
     text : value["name"] 
 
    })); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="empid" class="dropdn"> 
 
    <option>Please select...</option> 
 
</select>

來源

2017-05-08 15:49:04 Alessandro

謝謝@Alessandro。順便說一句，我可以從變量中獲取文本字段的數據嗎？例如，現在我們正在爲每個「dropdn」獲取值。但是，如果我將某些數據存儲在單個變量中，如'var name1 =「Jhon Doe」'等，請讓我知道它是否可以理解。 – Amit

我添加了一個小例子來向您展示如何添加元素以使用jQuery來選擇輸入，無論如何都要考慮提出一個新問題。再見 – Alessandro

具有不正常類。名稱。您的選擇適用於該類下的所有元素。您只需要定位該輸入。檢查此：

$(document).on("change",(dropDown),function(e){ 

    var value = $.trim($(this).val()); 
    console.log($(this).parent().parent()); 
    $(this).parent().parent().find('.name').val(value); 

});

來源

2017-05-08 15:41:08 tech2017

試試這個;

(function($) { 
 
\t // always strict mode on 
 
\t // cannot use undefined vars on strict mode 
 
\t "use strict"; 
 

 
\t $(document).ready(function() { 
 
\t \t 
 
\t \t $(document).on('click','#datagrid .add',function() { 
 
\t 
 
\t \t \t var row=$(this).closest('tr'); 
 
\t \t \t var clone = row.clone(); 
 
\t \t \t var tr= clone.closest('tr'); 
 
\t \t \t tr.find('input[type=text]').val(''); 
 
\t \t \t $(this).closest('tr').after(clone); 
 
\t \t \t var $span=$("#datagrid tr"); 
 
\t \t \t $span.attr('id',function (index) { 
 
\t \t \t return 'row' + index; 
 
\t \t  
 
\t \t \t }); 
 
\t \t \t 
 
\t \t }); 
 
\t \t 
 
\t \t $(document).on('click','#datagrid .removeRow',function() { 
 
\t \t \t if ($('#datagrid .add').length > 1) { 
 
\t \t \t \t $(this).closest('tr').remove(); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t }); 
 
\t \t 
 
\t }); 
 

 
\t var dropDown = ".dropdn"; 
 
\t var empName = ".name"; 
 
\t 
 
    $(document).on("change",(dropDown),function(e){ 
 
\t \t 
 
\t \t var value = $.trim($(this).val()); 
 
\t \t 
 
\t \t $(this).parent().next().find(".name").val(value); 
 
\t \t 
 
\t }); 
 
\t 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="datagrid" class="display table1"> 
 
<thead> 
 
    <tr> 
 
     <th>Employee Code</th> 
 
     <th>Employee Name</th> 
 
    </tr> 
 
</thead> 
 

 
<tbody id="dataTable"> 
 

 
    <tr id="row1"> 
 
     <td > 
 
     <select name="empid" class="dropdn"> 
 
      <option>Please select...</option> 
 
      <option>Jhon Doe</option> 
 
      <option>George Antony</option> 
 
      <option>David Blare</option> 
 
      <option>Kene Roy</option> 
 
     </select> 
 
     
 
     </td> 
 

 
     <td> 
 
      <input type='text' readonly name="name" size="20" class="name" value=""/> 
 
     </td> 
 
     <td> 
 
      <input type="button" name="addRow" class="add" value='Add'/> 
 
     </td> 
 
     <td> 
 
      <input type="button" name="removeRow" class="removeRow" value='Delete'/> 
 
     </td> 
 
     
 
    </tr> 
 
       
 
</tbody> 
 

 
</table>

來源

2017-05-08 15:42:15

你去那裏： https://jsfiddle.net/rmse9nw3/3/

事實上，當從下拉列表中選擇一個選項，你選擇所有<input>，然後改變其值。我做了什麼，選擇當一個選項，然後移動到最接近tr然後找到<tr>內<input>並改變其價值，瞧，它做了:)

來源

2017-05-08 15:45:08

您可以使用：最後僞選擇，選擇了作爲最後克隆元素類名「名稱'，

var dropDown = ".dropdn"; 
var empName = ".name:last";//select last element having classname named 'name' 

$(document).on("change",(dropDown),function(e){ 

    var value = $.trim($(this).val()); 
    $(empName).val(value); 

});

來源

2017-05-08 15:50:01

回答

相關問題