كيف يمكنني إخفاء منتصف الجدول باستخدام jQuery؟

StackOverflow https://stackoverflow.com/questions/215219

  •  03-07-2019
  •  | 
  •  

سؤال

لدي جدول طويل للغاية مكون من 3 أعمدة.وأود أن 

<table>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Start</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>End</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
</table>

هذه هي النتيجة التي أحاول الحصول عليها باستخدام jQuery.

Column1  Column2
Column1  Column2
...Show Full Table...
Column1  Column2
Column1  Column2

يجب استبدال الصفوف الوسطى بنص مثل "إظهار الجدول الكامل" ، وعندما يتم النقر عليه ، سيتم توسيعها لإظهار الجدول الكامل من البداية إلى النهاية.

ما هي أفضل طريقة للقيام بذلك في jQuery؟

راجع للشغل لقد حاولت بالفعل إضافة فئة "Table_Middle" إلى بعض الصفوف ولكنها لا تخفيها تمامًا، فالمساحة التي تشغلها لا تزال موجودة وليس لدي النص لمنح المستخدم طريقة لتوسيع الجدول تماما.

[EDIT] Added Working Example HTML inspired by Parand's posted answer

فقط الصق في ملف HTML فارغ.

إنه يتحلل بشكل جيد لإظهار الجدول الكامل فقط إذا تم إيقاف تشغيل Javascript.إذا كان Javascript قيد التشغيل، فإنه يخفي صفوف الجدول الأوسط ويضيف روابط العرض/الإخفاء.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Example Show/Hide Middle rows of a table using jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#HiddenRowsNotice").html("<tr><td colspan='2'> <a href='#'>>> some rows hidden <<</a></td></tr>");
                $("#ShowHide").html("<tr><td colspan='2'><a href='#'>show/hide middle rows</a></td></tr>");
                $("#HiddenRows").hide();

                $('#ShowHide,#HiddenRowsNotice').click( function() {
                    $('#HiddenRows').toggle();  
                    $('#HiddenRowsNotice').toggle();
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tbody id="ShowHide"></tbody>
                <tr><th>Month Name</th><th>Month</th></tr>
            <tbody>
                <tr><td>Jan</td><td>1</td></tr>    
            </tbody>
            <tbody id="HiddenRowsNotice"></tbody>
            <tbody id="HiddenRows">
                <tr><td>Feb</td><td>2</td></tr>
                <tr><td>Mar</td><td>3</td></tr>
                <tr><td>Apr</td><td>4</td></tr>    
            </tbody>
            <tbody>
                <tr><td>May</td><td>5</td></tr>            
            </tbody>
        </table>
    </body>
</html>

[عدل] الرابط الخاص بي مشاركة مدونة ومثال العمل.

هل كانت مفيدة؟

المحلول

Something like this could work:

<table>
    <tbody>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr class="Show_Rows"><td>Start</td><td>Hiding</td></tr>
    </tbody>
    <tbody class="Table_Middle" style="display:none">
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
    <tbody>
      <tr class="Show_Rows"><td>End</td><td>Hiding</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
</table>


$('#something').click( function() {
    $('.Table_Middle').hide();
    $('.Show_Rows').show();
});

$('.Show_Rows').click( function() { 
    $('.Show_Rows').hide();
    $('.Table_Middle').show();
});

نصائح أخرى

أسهل طريقة هي إضافة ملف <tbody> في تجميع الصفوف وتبديل ذلك بين none و table-row-group (قبض على الاستثناءات وقم بتعيينها على block ل IE).لست متأكدًا من جعل الأمر خاصًا بـ jquery ولكن هذه هي الطريقة "العادية" للقيام بالأشياء.

إليك الحل الذي لا يتطلب أي علامات إضافية ويتحلل بشكل جيد.

<table id="myTable">
    <tbody>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
    </tbody>
</table>

لقد قمت بترميز بعض الأشياء هنا (مثل معرف الجدول، وعدد الصفوف المراد إظهارها، وما إلى ذلك).يمكن وضعها في class سمة على الطاولة إذا كنت تريد أن تكون أكثر قابلية لإعادة الاستخدام.(على سبيل المثال: <table class="hidey_2">)

var showTopAndBottom = 2,
    minRows = 4,
    $rows = $('#myTable tr').length),
    length = $rows.length
;
if (length > minRows) {
    $rows
        .slice(showTopAndBottom, length - showTopAndBottom)
        .hide()
    ;
    $rows
        .eq(showTopAndBottom - 1)
        .after(
            // this colspan could be worked out by counting the cells in another row
            $("<tr><td colspan=\"2\">Show</td></tr>").click(function() {
                $(this)
                    .remove()
                    .nextAll()
                    .show()
                ;
            })
        )
    ;
}

حاول استخدام طريقة الشريحة ():

$("#table tr").slice(1, 4).hide();

إذا أعطيت وسطك <tr /> العلامات "Table_Middle"الفصل يجعل الأمر أسهل بكثير.واحد لإضافة صف "إظهار الجدول الكامل" ، والآخر لإضافة مستمع نقرة لهذا الصف.تأكد من تغيير colspan قيمة "X" الخاصة بـ Assitribute لعدد الأعمدة في الجدول الخاص بك.

 // jQuery chaining is useful here
 $(".Table_Middle").hide()
                   .eq(0)
                   .before('<tr colspan="X" class="showFull">Show Full Table<tr/>');

$(".showFull").click(function() {
    $(this).toggle();
    $(".Table_Middle").toggle();
});

يعد هذا مفيدًا لأنه يتحلل بشكل جيد ويمكن الوصول إليه عبر الكثير من المتصفحات/الأجهزة.إذا تم إيقاف تشغيل JavaScript ، أو تم تعطيل CSS (أو أي سيناريو آخر يمكن أن يتسبب في عدم دعم هذا الرمز) ، لا يوجد صف "عرض كامل".

ربما أفعل ذلك مثل هذا:

<table>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
    <tbody id="hidden-rows">
        <tr>
            <td colspan="3">
                <a href="#" onclick="$('#hidden-rows').hide();$('#extra-rows').show();">
                    Show hidden rows
                </a>
            </td>
        </tr>
    </tbody>
    <tbody id="extra-rows" style="display: none;">
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
</table>

It's not a great method, because it doesn't degrade nicely.

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

أيضًا ، يجب أن تعمل طريقة إعطاء الصفوف لإخفاء فصل معين.سيبدو jQuery كما يلي:

$(document).ready(function() {
    $('tr.Table_Middle').hide();
});

ومع ذلك، ستظل بحاجة إلى إنشاء الصف بالرابط لإظهاره.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top