javascript - 如何使用jQuery删除动态添加的行?
问题描述
我正在尝试在表格的每一行之后放置一个“删除”按钮。删除按钮的功能应该只有在添加新行时才会被激活。如果两行中的一行被删除,现有行的删除按钮也应该被停用。任何帮助将不胜感激。谢谢。
var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
$(document).on('click','.Buttons', function(e) {
var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
if(count || !$('select:last').val()){
alert("Please fill all the fields in the current row");
return false;
}
var $tr = $('#dataTable tbody tr:last');
var $clone = $tr.clone(true);
cindex++;
$clone.find(':input').not('select').val('').attr('disabled', true);
$clone.attr('id', 'id'+(cindex) ); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
if(id != ""){
var match = id.match(regex) || [];
if (match.length == 2) {
this.id = match[1] + (cindex);
}
}
});
$tr.after($clone);
});
/*`For delete button*/
$(document).on("click", '.DeleteButton', function() {
$(this).closest("tr").remove();
});
/*for enable field*/
$(document).on("click", '.DeleteButton', function() {
$(this).closest("tr").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="16%"></td>
</tr>
</thead>
<tbody>
<tr id="id01" name="row">
<td>
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
<option value="">Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
<td>
<input tabindex="6" id="Button4" value="Delete Row" disabled="true" class="DeleteButton" name="Button4" type="button" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
</ul>
</div>
解决方案
您可以通过以下方式在每个“添加新行”按钮和“删除行”按钮上获取表中的行数:
var Count = $('#dataTable tr').length;
然后使用您的值Count
可以启用/禁用删除按钮,例如
if(Count < 2 )
//code to disable
else
//code to enable
推荐阅读
- python - Django 在 MEDIA_ROOT 文件夹中创建文件并将其保存到 FileField
- c++ - C++ 为什么这些相同的代码(我认为)给出不同的输出?
- php - 使用prepare语句插入数据
- r - dplyr 按多个条件过滤,包括日期
- python - 多次使用 Argparse 参数
- python - 将 OrderedDicts 的系列/列表更改为 Pandas DataFrame
- javascript - ReferenceError:未定义模块
- spring - 将上下文路径更改为索引页面,但显示状态 404
- python - Groupby 列和按每个组的行数降序排序值
- java - 如何使 Recyclerview 和 Cardview 透明