如何从<table><tr><td></td></tr></table>并将所选控件附加到相同的<td>
How to get specific HTML control from a <table><tr><td></td></tr></table> and append the selected control to the same <td>?
我在HTML中有以下表格:
<table id="blacklistgrid_1" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1_1">
<td>
<div class="btn-group">
<select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
<option value="" selected='selected'>Select Product</option>
</select>
</div>
</td>
<td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[1]" id="units_1" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb1_2">
<td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td colspan="5"></td>
</tr>
</tfoot>
</table>
现在我要加上
<select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
<option value="" selected='selected'>Select Product</option>
</select>
到它当前所在的<td>
,单击Add按钮。以前的功能是在新<tr>
的第一个<td>
中添加<select></select>
的整个行,但现在的要求是仅将<select></select>
附加到现有的<td>
。我之前的代码如下:
$(document).delegate('.products','click',function (e) {
var table_id = $(this).closest('table').attr('id');
var no = table_id.match(/'d+/)[0];
var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
var new_row = $('#'+first_row).clone();
var tbody = $('#' + table_id + ' tbody');
var n = $('tr', tbody).length + 1;
new_row.attr('id', 'reb' + no +'_'+ n);
$(':input', new_row).not('.prod_list').remove();
$('select', new_row).attr('name','product_id_'+no+'['+n+']');
$('select', new_row).attr('id','product_id_'+no+'_'+n);
$('<button style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">×</button>').appendTo( $(new_row.find('td:first')) );
tbody.append(new_row);
$(new_row).children('td').not('td:eq(0)').remove();
});
但是请注意,要附加的<select></select>
的id和名称应该与我之前的功能相同。您可以参考上面的代码。
你可以试试下面的javascript代码
var count = 1;
$('#blacklistgrid_1').on('click', '.products', function () {
var n = $('.pro:last').attr('name').match(/'[(.*?)']/);
var newName = $('.pro:last').attr('name').replace(/'[(.*?)']/, '[' + (+n[1] + 1) + ']');
var newID = $('.pro:last').attr('id').replace(/[^_]*$/, +n[1] + 1);
var toCloneDiv = $('.selectControls:last').clone();
var clonedDiv = $(toCloneDiv).appendTo('#reb1_1 > td:nth-child(1)');
//add delete button
if (count == 1) $('<button style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">×</button>').appendTo(clonedDiv);
count++;
$(clonedDiv).find('.pro').attr({
'id': newID,
'name': newName
});
});
// to remove select element
$('#blacklistgrid_1').on('click','.close', function(){
$(this).closest('div').remove();
});
看到这个小提琴演示
相关文章:
- 正在获取生成的PHP td值
- 如何在td元素中添加监听器
- 如何首先设置样式<td>表中包含在窗体中的元素
- Jquery - table.row(tr) is undefined
- 使用javascript获取表的td值
- tu如何将id放在填充了json数据的html表td上
- 改变所有<td>为特定的桌子点击颜色
- JQuery展开和隐藏表td
- jQuery如何获取td单元格值
- 如何调用表td标记内的Onload函数
- javascript, ajax, table, colour
- 使用谷歌地图api计算距离并将其设置在表格中<td>
- jQuery parent() in table
- 查找所有TD标签并读取其数据属性
- onclick for table TD
- Jquery-如何使用TAB或ENTER键从TABLE TD更改
- getElementsByTagName(“table”)-以奇怪的方式获取td
- 如何获得Table "Td"动态值
- TD In Table If/Else
- 在html-table - jquery中设置某个td的文本