到目前为止,我找不到以下问题的解决方案。如果有人可以帮助我,我将非常高兴。

我有一个带有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);

});

最佳答案

选择器.name将选择文档中具有class属性等于name的所有字段,因此当您为其设置新值时,它将更改每个字段.name

要仅更改“正确的”名称,可以修改以下行:

$(empName).val(value);




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


为了仅在name元素的同一tr中获得输入字段select

请参见以下代码片段(我仅在上面的行中进行了修改):



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

	$(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());

    //Change this line:
	//$(empName).val(value);
    //To:
    $(this).closest('tr').find(empName).val(value);

	});

})(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>





我希望清楚,再见。

更新后,回答新问题,如何动态添加选项:



$.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>

关于javascript - 从为表格行创建的每个新“选择选项”中选择并显示值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43851551/

10-11 23:29
查看更多