ما هي أفضل طريقة لإزالة صف الجدول مع jQuery ؟

https://stackoverflow.com/questions/170997

05-07-2019
|

سؤال

المحلول

وأنت على حق:

$('#myTableRow').remove();

وهذا يعمل بشكل جيد إذا الصف الخاص بك لديه id، مثل:

<tr id="myTableRow"><td>blah</td></tr>

إذا لم يكن لديك id، يمكنك استخدام أي من كبير في مسج محددات .

نصائح أخرى

$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

وعلى افتراض لديك زر / رابط داخل خلية البيانات في الجدول الخاص بك، فإن شيئا من هذا القبيل تفعل خدعة ...

$(".delete").live('click', function(event) {
    $(this).parent().parent().remove();
});

وهذا سيزيل الأم من الأم لل/ رابط الزر الذي يتم النقر. تحتاج إلى استخدام الأم () لأنه هو كائن مسج، وليس كائن DOM العادي، وتحتاج إلى استخدام الأم () مرتين، لأن الزر يعيش داخل خلية البيانات، التي تعيش داخل الصف .... وهو ما الذي تريد إزالته. $ (هذا) هو النقر على زر، لذلك مجرد وجود شيء من هذا القبيل سوف فقط إزالة زر:

$(this).remove();

ولئن كان هذا سيزيل الخلايا البيانات:

    $(this).parent().remove();

إذا كنت تريد ببساطة انقر في أي مكان على التوالي لإزالته شيئا من هذا القبيل من شأنه أن يعمل. هل يمكن بسهولة تعديل هذا للمطالبة المستخدم أو تعمل فقط على انقر نقرا مزدوجا فوق:

$(".delete").live('click', function(event) {
    $(this).parent().remove();
});

وعلى أمل أن يساعد ... أنا ناضلت على هذا قليلا نفسي.

ويمكنك استخدام:

$($(this).closest("tr"))

ولإيجاد صف الجدول الأصل عنصر.

ومن أكثر أناقة من الوالدين (). الأم () وهو ما بدأت به، وعلمت الخطأ من طرقي قريبا.

و- تحرير - وأشار أحدهم إلى أن مسألة كان حول إزالة الصف ...

$($(this).closest("tr")).remove()

وكما أشار أدناه يمكنك ببساطة القيام به:

$(this).closest('tr').remove();

ويمكن استخدام قصاصة رمز مشابهة لكثير من العمليات مثل أحداث إطلاق النار على عناصر متعددة.

وسهلة .. جرب هذا

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});

هل ما يلي مقبول:

$('#myTableRow').remove();

function removeRow(row) {
    $(row).remove();
}

<tr onmousedown="removeRow(this)"><td>Foo</td></tr>

وربما شيء من هذا القبيل يمكن أن تعمل بشكل جيد؟ لم أحاول القيام بشيء مع "هذا"، لذلك أنا لا أعرف ما إذا كان يعمل أم لا.

كل ما عليك القيام به هو إزالة صف الجدول (<tr>) الوسم من الجدول الخاص بك.على سبيل المثال هنا هو رمز لإزالة الصف الأخير من الجدول:

$('#myTable tr:last').remove();

*رمز أعلاه مأخوذة من هذا مسج Howto بعد.

وهذه محاولة لحجم

$(this).parents('tr').first().remove();

وقائمة كاملة:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $('.deleteRowButton').click(DeleteRow);
      });

    function DeleteRow()
    {
      $(this).parents('tr').first().remove();
    }
  </script>
</head>
<body>
  <table>
    <tr><td>foo</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
    <tr><td>bar bar</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
    <tr><td>bazmati</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
  </table>
</body>
</html>

ترى أنه في العمل

وآخر واحد من empty():

$(this).closest('tr').empty();

إذا الصف الذي تريد حذفه قد تغير يمكنك استخدام هذا. يمر هذه الوظيفة الصف # ترغب في حذفها.

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}

$('tr').click(function()
 {
  $(this).remove();
 });

وأعتقد أنك سوف نحاول رمز أعلاه، كما أنها تعمل، ولكن أنا لا أعرف لماذا العمل لبعض الوقت ومن ثم تتم إزالة الجدول بأكمله. أحاول أيضا لإزالة الخلاف عن طريق النقر على التوالي. ولكن لا يمكن أن تجد الجواب بالضبط.

وإذا كان لديك HTML مثل هذا

<tr>
 <td><span class="spanUser" userid="123"></span></td>
 <td><span class="spanUser" userid="123"></span></td>
</tr>

وحيث userid="123" هو السمة المخصصة التي يمكنك ملء حيوي عند إنشاء الجدول،

ويمكنك استخدام شيء من هذا القبيل

  $(".spanUser").live("click", function () {

        var span = $(this);   
        var userid = $(this).attr('userid');

        var currentURL = window.location.protocol + '//' + window.location.host;
        var url = currentURL + "/Account/DeleteUser/" + userid;

        $.post(url, function (data) {
          if (data) {
                   var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
                   var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
                   trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW 
             } else {
                alert('Sorry, there is some error.');
            }
        }); 

     });

حتى في هذه الحالة كنت لا تعرف الطبقة أو معرف العلامة TR لكن على أي حال كنت قادرا على حذفها.

وأنا أقدر هذا هو آخر العمر، ولكن كنت أبحث على أن تحذو حذوها، وجدت الإجابة مقبولة لم تنجح بالنسبة لي. على افتراض مسج انتقلت منذ كتابة هذا.

وعلى أية حال، لقد وجدت ما يلي عملت بالنسبة لي:

$('#resultstbl tr[id=nameoftr]').remove();

ولست متأكدا إذا كان ذلك يساعد أي شخص. وكان بلدي المثال أعلاه جزء من وظيفة أكبر حتى لا ملفوفة في المستمع الحدث.

إذا كنت تستخدم الجداول التمهيد

وإضافة هذه التعليمات البرمجية المتكررة لbootstrap_table.js بك

BootstrapTable.prototype.removeRow = function (params) {
    if (!params.hasOwnProperty('index')) {
        return;
    }

    var len = this.options.data.length;

    if ((params.index > len) || (params.index < 0)){
        return;
    }

    this.options.data.splice(params.index, 1);

    if (len === this.options.data.length) {
        return;
    }

    this.initSearch();
    this.initPagination();
    this.initBody(true);
};

وبعد ذلك في var allowedMethods = [ بك

وإضافة 'removeRow'

وأخيرا يمكنك استخدام $("#your-table").bootstrapTable('removeRow',{index:1});

قروض لهذا المنصب

والهوية ليست محدد جيدة الآن. يمكنك تحديد بعض الخصائص على الصفوف. ويمكنك استخدامها كما محدد.

<tr category="petshop" type="fish"><td>little fish</td></tr>
<tr category="petshop" type="dog"><td>little dog</td></tr>
<tr category="toys" type="lego"><td>lego starwars</td></tr>

ويمكنك استخدام ظائفها لتحديد الصف مثل هذا (ES6):

const rowRemover = (category,type)=>{
   $(`tr[category=${category}][type=${type}]`).remove();
}

rowRemover('petshop','fish');

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow