Сохранение ширины таблицы / столбцов при отображении и скрытии строк с выбранными классами - PullRequest
Новая
       8

Сохранение ширины таблицы / столбцов при отображении и скрытии строк с выбранными классами

1 голос
/ 25 декабря 2010

Этот код работает как талисман, чтобы показать / скрыть строки таблицы на основе выбранных фильтров. Однако ширина таблицы изменяется в зависимости от содержимого строк. Я попытался установить ширину таблицы и ширину каждого столбца по классам на 100% в CSS и в jQuery. Ширина все еще продолжает прыгать в зависимости от размера содержимого в каждом тд. Таблица на самом деле имеет шесть столбцов, поэтому ее ширина от 100% до 50% действительно раздражает.

Я хочу, чтобы он оставался одинаковой ширины независимо от того, какой селектор выбран, и независимо от ширины содержимого в тдс. Но как мне это сделать? Вы можете увидеть три способа, которыми я пытался установить ширину в jQuery. Буду признателен за любые предложения! 

$(document).ready(function() {
    // show all the organization
    $("#org_status tr").show();

    $("#filter_status a").click(function(evt) {
        evt.preventDefault();
        $("#org_status tr").hide();
        var id = $(this).attr('id');

        //set width of table and columns
        $("#org_status").width("100%");
        $(".org-name-col").css("width","85%");
        $(".org-status-col").attr("width","15%");

        $("." + id).show();
        //Setting widths here did not work either
    });
});

Вот CSS: 

#org_status{width:100%;}
.org-name-col{width:85%;}
.org-status-col{width:15%;}

Вот HTML: 

<p id='filter_status'>Filter by status: 
    <a href='#' id='All'>All</a> 
    <a href='#' id='Active'>Active</a> 
    <a href='#' id='Inactive'>Inactive</a> 
    <a href='#' id='Pending'>Pending</a>
</p>

<table id='org_status' class='info_table tablesorter'>
  <thead>
    <tr>
      <th class='org-name-col'>Name</th>
      <th class='org-status-col'>Status</th>
    </tr>
  </thead>
  <tbody>
<tr class='All Active'>
  <td><a href='admin/org_edit.php?org=29'>Foo Net</a></td>
  <td>Active</td>";
</tr>
<tr class='All Inactive'>
  <td><a href='admin/org_edit.php?org=22'>Bar</a></td>
  <td>Active</td>";
</tr>
<tr class='All Pending'>
  <td><a href='admin/org_edit.php?org=11'>
      Bar Foo Very Long Org Name Goes Here...........................</a></td>
  <td>Active</td>";
</tr>
  </tbody>  
</table>

1 Ответ

1 голос
/ 25 декабря 2010

Все, что вам нужно сделать, это добавить классы в ячейки таблицы.

Например:

HTML 

<tr>
    <td class="name">Some text</td>
    <td class="state">Some state</td>
</tr>

CSS 

.name{width:100%;}
.state{width:24px;}

Вот пример кода

...