到目前为止,我找不到以下问题的解决方案。如果有人可以帮助我,我将非常高兴。
我有一个带有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/