【发布时间】：2020-05-17 00:58:51
【问题描述】：
这里的 javascript 用于创建多个表字段，通过单击一加按钮多次打开它现在工作正常我的问题是当我单击关闭按钮时它会被删除但不是，当我在 java 脚本中使用 $(this).parent().parent().remove 时，当我使用 $('tbody').remove() 或 $('tbody tr').remove() 或 $('tbody tr td').remove() 然后是整个表及其字段时它不起作用已删除....请让
$('#addRow').on('click', function() {
addRow();
});
function addRow() {
var td1 = '<td>' +
'<label class="control-label">Class / Field :</label>' +
'</td>' +
'<td>' +
'<input class="form-control" id="idSource" type="text" name="class[]" />' +
'</td>' +
'<td>' +
'<label class="control-label">University :</label>' +
'</td>' +
'<td>' +
'<input class="form-control" id="idDestination" type="text" name="university[]" />' +
'</td>';
var td2 = '<td>' +
'<label class="control-label">Institute / Collage Name :</label>' +
'</td>' +
'<td>' +
'<input class="form-control" id="idSource" type="text" name="institute_name[]" />' +
'</td>' +
'<td>' +
'<label class="control-label"> Percentage / GPA / CGPA : </label>' +
'</td>' +
'<td>' +
'<input class="form-control" id="idDestination" type="text" placeholder="00.00" name="per[]"/>' +
'</td>';
var td3 = '<td>' +
'<label class="control-label">Start Date :</label>' +
'</td>' +
'<td>' +
'<input class="form-control" id="idSource" type="date" name="sdate[]" />' +
'</td>' +
'<td>' +
'<label class="control-label">End Date:</label>' +
'</td>' +
'<td>' +
'<input class="form-control" id="idDestination" type="date" name="edate[]" />' +
'</td>';
var td4 = '<td><a class="btn btn-danger" id="remove"><i class="fa fa-remove"></i></a></td>';
var td5 = '<td>' +
'<b> </a>' +
'</td>' +
' <td>' +
'<b> </b>' +
'</td>' +
' <td>' +
'<b> </b>' +
'</td>' +
' <td style="text-align: right;">' +
'<b><a class="btn btn-danger" id="remove"><i class="fa fa-remove"></i></a></b>' +
'</td>';
$('tbody').append('<tr>' + td1 + '</tr>' + '<tr>' + td2 + '</tr>' + '<tr>' + td3 + '</tr>' + '<tr>' + td5 + '</tr>');
};
$('tbody').on('click', '#remove', function() {
var last = $('tbody').length;
if (last == 1) {
alert('You Can Not Remove Last');
} else {
if (confirm("Do you want to delete this row?")) {
$(this).parent().parent().remove();
$('tbody').remove();
}
}
});
刀片文件
<div class="col-md-12 field-wrapper" id="wrapper">
<div class="panel panel-footer">
<form id="allInputsFormValidation" class="form-horizontal" action="{{route('create_education')}}" method="post">
@csrf
<table class="table table-striped col-md-12">
<thead>
<tr>
<td><b>
<a class="btn btn-success" id="addRow"><i class="fa fa-plus"></i></a>
</td>
<td><b> </b></td>
<td><b> </b></td>
<td><b>
</td>
</tr>
</thead>
<div class="form-group column-sizing">
<tbody id="tbody">
<tr>
<td>
<label class="control-label">Class / Field :</label>
</td>
<td>
<input class="form-control" type="text" name="class[]" />
</td>
<td>
<label class="control-label">University :</label>
</td>
<td>
<input class="form-control" type="text" name="university[]" />
</td>
</tr>
<tr>
<td>
<label class="control-label">Institute / Collage Name :</label>
</td>
<td>
<input class="form-control" type="text" name="institute_name[]" />
</td>
<td>
<label class="control-label">Percentage / GPA / CGPA / SPI :</label>
</td>
<td>
<input class="form-control" type="text" name="per[]" />
</td>
</tr>
<tr>
<td>
<label class="control-label">Start Date :</label>
</td>
<td>
<input class="form-control" type="date" name="sdate[]" />
</td>
<td>
<label class="control-label">End Date :</label>
</td>
<td>
<input class="form-control" type="date" name="edate[]" />
</td>
</tr>
<tr>
<td><b> </b></td>
<td><b> </b></td>
<td><b> </b></td>
<td style="text-align: right;"><b>
<a class="btn btn-danger" id="remove"><i class="fa fa-remove"></i></a></b>
</td>
</tr>
</tbody>
</div>
</table>
<div class="card-footer" style="margin-left: 90%">
<button type="submit" class="btn btn-info btn-fill">Submit</button>
</div>
</form>
</div>
</div>
【问题讨论】：
-
你必须支持哪种浏览器？
-
谷歌浏览器..
-
您的 html 结构非常非常糟糕...您必须对其进行更改以在运行时轻松添加/删除行...并尝试尽可能少地使用表格
-
为什么很糟糕？？对我来说这很容易，但我无法制作一个相同的 javascript 结构，但只有一些变化，而且它是工作条件，所以为什么它不工作？？？
-
首先，修复你的HTML代码，你不应该有重复的ID！停止使用
'...' + '...'只需使用 blackslack 并在那里添加所有代码，它的可读性会更高！最简单的方法是有一个计数器，然后将其分配给每个td，可能像：<td data-block="${total_bocks}">并在按钮中添加一个<a class="btn btn-danger" class="btn-remove" data-block="${total_bocks}">...，然后在点击时附加一个.btn-remove事件，阅读data-block和删除所有带有$("td[data-block=' + id + ']).remove()的 td
标签： javascript jquery laravel-6