إخفاء / إظهار عمود في جدول HTML

Question

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

<table>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>

Answer 1

<اقتباس فقرة>   

وأود أن القيام بذلك دون ربط فئة إلى كل الدفتيريا

وشخصيا، كنت أذهب مع نهج الطبقة على أساس كل-TD / ث / عمود. ثم يمكنك التبديل الأعمدة داخل وخارج باستخدام الكتابة واحد لاسم_الفئة على الحاوية، على افتراض قواعد النمط مثل:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

وهذا سيكون أسرع من أي نهج حلقة JS. للجداول طويلة حقا يمكن أن تحدث فرقا كبيرا في الاستجابة.

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

Answer 2

وسطر واحد من التعليمات البرمجية باستخدام مسج الذي يخفي 2nd العمود:

$('td:nth-child(2)').hide();

إذا تمت رأس الجدول الخاص بك (ال)، استخدم هذا:

$('td:nth-child(2),th:nth-child(2)').hide();

المصدر: إخفاء عمود الجدول مع سطر واحد من التعليمات البرمجية مسج

وjsFiddle لاختبار كود: http://jsfiddle.net/mgMem/1/

---

إذا كنت تريد أن ترى حالة استخدام جيدة، ونلقي نظرة على بلدي بلوق وظيفة:

إخفاء عمود جدول وتلوين الصفوف على أساس على القيمة مع مسج .

Answer 3

هل يمكن استخدام colgroups:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

والسيناريو الخاص بك ثم يمكن أن يتغير فقط الطبقة رغبة <col>.

Answer 4

وفيما يلي ينبغي أن نفعل ذلك:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

وهذا هو قانون غير مجربة، ولكن المبدأ هو أن تختار خلية الجدول في كل صف الذي يتوافق مع مؤشر اختيار المستخرجة من اسم مربع. هل يمكن بالطبع لحد من محددات مع فئة أو معرف.

Answer 5

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

وهذا من شأنه أن ننظر بشيء من هذا القبيل في جافا سكريبت:

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

لدعم هذا، سنقوم بإضافة بعض العلامات إلى طاولة المفاوضات. في كل رأس العمود، ويمكننا أن نضيف شيئا من هذا القبيل لتوفير مؤشر مرئي من شيء نقر

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

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

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

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

عرض العمل في jsFiddle والمكدس القصاصات:

$(function() {
  // on init
  $(".table-hideable .hide-col").each(HideColumnIndex);

  // on click
  $('.hide-column').click(HideColumnIndex)

  function HideColumnIndex() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    // get cell location - https://stackoverflow.com/a/4999018/1366033
    var colIndex = $cell[0].cellIndex + 1;

    // find and hide col index
    $table.find("tbody tr, thead tr")
      .children(":nth-child(" + colIndex + ")")
      .addClass('hide-col');
      
    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})

body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>




<table class="table table-condensed table-hover table-bordered table-striped table-hideable">

  <thead>
    <tr>
      <th>
        Controller
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th class="hide-col">
        Action
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th>
        Type
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th>
        Attributes
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

  </tbody>
  <tfoot class="footer-restore-columns">
    <tr>
      <th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
    </tr>
  </tfoot>
</table>

Answer 6

وبطبيعة الحال، فإن CSS الطريقة الوحيدة ل المتصفحات التي تدعم nth-child :

وtable td:nth-child(2) { display: none; }

وهذا هو لIE9 والأحدث.

لنموذج التطبيقي الخاص بك، وكنت بحاجة إلى عدة فئات لإخفاء الأعمدة:

.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

وإلخ ...

Answer 7

وفيما يلي بناء على كود عيران، ومع بعض التغييرات الطفيفة. اختبرت ذلك ويبدو أن تعمل بشكل جيد على فايرفوكس 3، IE7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<table>
<thead>
    <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
    </tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
</body>
</html>

Answer 8

<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});
 </script>

Answer 9

ودون الدرجة؟ يمكنك استخدام علامة ثم:

var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

ولتبين لهم استخدام:

...style.display = 'table-cell';