如何删除我点击其按钮的行?

问题描述 投票:-1回答:4

我在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>
i dont kow how to say when i click,by id................................
............................................................................... ......................................................... .................................................. ........................................................................ ...................................................................... . .......................
javascript ajax asp.net-mvc
4个回答
1
投票

我认为你应该向表行添加一个事件监听器,以便删除它们:

$(document).on('click', '#AdminProductList>tr', function(){
  $(this).remove()
});

如果你想获得输入值,实际上有很多方法可以做到。如果要获取所有输入值,可以像这样遍历它们:

function getInputValues(){
 $('tr input').each(function(){
   console.log($(this).val());
 });
}

0
投票

试试这样:

  $.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")
             }
        }

         })
    })

0
投票

$('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());

0
投票

您需要为删除按钮添加一个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");

        }
    });

})
© www.soinside.com 2019 - 2024. All rights reserved.