我在cshtml页面有表标签,并通过ajax追加tr和td,现在我不知道怎么说当我点击它时删除行,而且我不知道如何获得每行输入的值。
/// <reference path="jquery-2.2.4.js"/>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "api/ProductsApi/GetProducts",
success: function (Products) {
debugger;
let item0 = '<tr>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'</tr>';
$("#AdminProductList").append(item0);
for (var i = 0; i < Products.length; i++) {
var d = Products[i].split("/");
let item = '<tr >' +
'<td><img src="/locker/' + d[0] + ' "alt="gnjh " style="width:70px;height:70px" /></td>' +
'<td>'+d[3]+'</td>' +
'<td>'+d[2]+'</td>'+
'<td>' + d[1] + '</td>' +
'<input id="AdminProductId'+i+'" type="hidden" value="'+d[5]+'" />'+
'<td id="'+i+'">' +
'<button data-toggle="tooltip" value="'+d[5]+'" class="pd-setting-ed eachEdit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><input type="hidden" value="' + d[5] +'"/></button>' +
'<button data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'</td>' +
'</tr>';
$("#AdminProductList").append(item);
}
},
error: function (f) {
debugger;
alert("nashod");
}
});
})
<div id="ListPage" style="display:none" class="product-status mg-tb-15">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="product-status-wrap" style="direction:rtl;">
<h4>f</h4>
<button style=" border: 0;width: 270px;padding: 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;display: block;text-decoration: none;text-align: center;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 1.2em;color: #FFF;background: #bc3737;-webkit-box-shadow: 0 3px 1px #950d0d;-moz-box-shadow: 0 3px 1px #950d0d;box-shadow: 0 3px 1px #950d0d;" class="add-product" id="Edit"> افزودن محصول</button>
<table id="AdminProductList" style="direction:rtl;">
</table>
</div>
</div>
</div>
</div>
</div>
我认为你应该向表行添加一个事件监听器,以便删除它们:
$(document).on('click', '#AdminProductList>tr', function(){
$(this).remove()
});
如果你想获得输入值,实际上有很多方法可以做到。如果要获取所有输入值,可以像这样遍历它们:
function getInputValues(){
$('tr input').each(function(){
console.log($(this).val());
});
}
试试这样:
$.ajax({
type:'POST',
url:'delete.php',
data:{del_id:del_id},
success: function(data){
if(data=="YES"){
$ele.fadeOut().remove();
}else{
alert("can't delete the row")
}
}
})
})
$('button').click(function(){
var tr = $(this).closest('tr');
var inputs = tr.find('input');
alert($(inputs[0]).val());
alert($(inputs[1]).val());
tr.remove();
})
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" /></td>
<td>Hidden value here<input type="hidden" value="test hidden" /></td>
<td><button>Remove</button></td>
</tr>
</table>
您可以使用此脚本
$('button').click(function(){
$(this).closest('tr').remove();
})
或写点击方法
<button click="remove(this)" data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
function remove(item){
$(item).closest('tr').remove();
}
更新:我创建了一个获取输入值的演示。
var inputs = tr.find('input');
alert($(inputs[0]).val());
alert($(inputs[1]).val());
您需要为删除按钮添加一个on click事件处理程序,然后删除该特定行。我编辑了您的代码以添加事件侦听器并删除该元素。
/// <reference path="jquery-2.2.4.js"/>
$(document).ready(function () {
window.deleteTableRow = function (selector) { $('tr'+selector).remove(); }
$.ajax({
type: "GET",
url: "api/ProductsApi/GetProducts",
success: function (Products) {
debugger;
let item0 = '<tr>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'<th>d</th>' +
'</tr>';
$("#AdminProductList").append(item0);
for (var i = 0; i < Products.length; i++) {
var d = Products[i].split("/");
let item = '<tr class="data-delete-index-'+ i +'">' +
'<td><img src="/locker/' + d[0] + ' "alt="gnjh " style="width:70px;height:70px" /></td>' +
'<td>'+d[3]+'</td>' +
'<td>'+d[2]+'</td>'+
'<td>' + d[1] + '</td>' +
'<input id="AdminProductId'+i+'" type="hidden" value="'+d[5]+'" />'+
'<td id="'+i+'">' +
'<button data-toggle="tooltip" value="'+d[5]+'" class="pd-setting-ed eachEdit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><input type="hidden" value="' + d[5] +'"/></button>' +
'<button onclick="deleteTableRow(\'.data-delete-index-'+ i +'\')" data-toggle="tooltip" title="Trash" class="pd-setting-ed eachTrash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'</td>' +
'</tr>';
$("#AdminProductList").append(item);
}
},
error: function (f) {
debugger;
alert("nashod");
}
});
})