摘要:我有一个html页面,其中包含两个添加按钮和两个表格。单击“添加”按钮时,行将附加到相应的表。我在两个html模板中包含了两个带有两个不同父ID的模板。我需要以这样的方式编写脚本:当add-btn有parentid =="#a"单击,将行附加到具有parentid的表=="#a"。
result.html
//i am using django web framework
<div class="reports">
{% include 'template1.html' with id="a" %}
{% include 'template2.html' with id="b" %}
</div>
每个模板共享/扩展base.html模板,其中编写了所有公共代码
<div class="panel">
<div>
<button type="button" class="add btn btn-primary" data-toggle="tooltip" title="Add to configuration list.">
<i class="fa fa-plus"></i>
Add
</button>
</div>
<div class ="configuration-table panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Remove</th>
<th>Layer</th>
<th>Display</th>
<th>Unit</th>
<th>Dataset</th>
<th>Ordering</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
我的jquery代码是
result.js
$('.reports').on('click','#a .add, #b .add', function(e) {
//how to differentiate two tables here.
$(this).find('configuration-table table').children('tbody')
.append(
'<tr>'+
'<td class="remove-row" role="button" aria-label="Remove Region"><i class="fa fa-times" title="Remove this row." data-toggle="tooltip" data-placement="right" aria-hidden="true"></i></td>'+
'<td>'+layer_text+'</td>'+
map_elements+
'<td>'+unit_text+'</td>'+
'<td>'+dataset_text+'</td>'+
'<td class="ordering" aria-label="Re-order"><i class="fa fa-arrows" title="Re-arrange row order." data-toggle="tooltip" data-placement="right"></i></td>'+
'</tr>'
);
问题:当我点击添加按钮时,该行会附加到这两个表中。而且我不想那样。我想在各自的表中添加行。我想在同一个功能中做到这一点。
我正在寻找我在这里缺少的逻辑。
提前致谢
答案 0 :(得分:1)
首先,根据标记,添加按钮和表之间没有父子关系。虽然,可以有很多方法来解决这个问题。提议下面的1个选项
我们假设你有两个带有类add
的按钮和一个包含表id的数据属性(data-id)。
即。第一个按钮有data-id =“a”,第二个按钮有data-id =“b”,其中a和b是各个表的id。
现在将您的js更新为以下
.on('click','.add', function(e) {
var table_id = $(this).data("id");
$("#"+table_id).children('tbody').append..... // your code
}
答案 1 :(得分:1)
您的代码正在使用find查找该按钮的子项。它不是一个孩子,它是按钮的父div的兄弟。
$(this) //button that was clicked
.parent() //div around the button
.sibling(".configuration-table") //sibling element that has the table
.find("table tbody") //the table
.append(tableRow);