动态为偶数行组添加背景色

时间：2020-10-30 08:54:03

标签： javascript html jquery css

我的代码如下：

$(document).ready(function() {
    $('#example').DataTable({
        "bLengthChange" : false,
      "paging": false,
      "bFilter": false,
      "columnDefs": [ {
        "targets"  : 'no-sort',
        "orderable": false,
      }],
      "order": []
    });
    
    $('#example th').click(function(e) {
      let clicked_col_class = $(this).attr('class');
        if(clicked_col_class.includes('office')){
          $('#example tbody tr.xbg-dark-grey').removeClass('xbg-dark-grey').addClass('bg-dark-grey');
        }else{
          $('#example tbody tr.bg-dark-grey').removeClass('bg-dark-grey').addClass('xbg-dark-grey');
        }
    });
} );
.bg-dark-grey{
  background-color: rgba(0,0,0,.05) !important;
}
.bg-white{
  background-color: #ffffff !important;
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<table id="example" class="xdisplay" style="width:100%">
        <thead>
            <tr>
                <th class="no-sort">Name</th>
                <th class="no-sort">Position</th>
                <th class="office">Office</th>
                <th>Age</th>
                <th class="no-sort">Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white">
              <td>Tiger Nixon</td>
              <td>System Architect</td>
              <td>Edinburgh</td>
              <td>61</td>
              <td>2011/04/25</td>
              <td>$320,800</td>
          </tr>
          <tr class="bg-white">
              <td>Quinn Flynn</td>
              <td>Support Lead</td>
              <td>Edinburgh</td>
              <td>22</td>
              <td>2013/03/03</td>
              <td>$342,000</td>
          </tr>
          <tr class="bg-white">
              <td>Cedric Kelly</td>
              <td>Senior Javascript Developer</td>
              <td>Edinburgh</td>
              <td>22</td>
              <td>2012/03/29</td>
              <td>$433,060</td>
          </tr>
          <tr class="bg-white">
              <td>Sonya Frost</td>
              <td>Software Engineer</td>
              <td>Edinburgh</td>
              <td>23</td>
              <td>2008/12/13</td>
              <td>$103,600</td>
          </tr>
          <tr class="bg-dark-grey">
              <td>Ashton Cox</td>
              <td>Junior Technical Author</td>
              <td>San Francisco</td>
              <td>66</td>
              <td>2009/01/12</td>
              <td>$86,000</td>
          </tr>
          <tr class="bg-dark-grey">
              <td>Herrod Chandler</td>
              <td>Sales Assistant</td>
              <td>San Francisco</td>
              <td>59</td>
              <td>2012/08/06</td>
              <td>$137,500</td>
          </tr>
          <tr class="bg-white">
              <td>Garrett Winters</td>
              <td>Accountant</td>
              <td>Tokyo</td>
              <td>63</td>
              <td>2011/07/25</td>
              <td>$170,750</td>
          </tr>
          <tr class="bg-white">
              <td>Airi Satou</td>
              <td>Accountant</td>
              <td>Tokyo</td>
              <td>33</td>
              <td>2008/11/28</td>
              <td>$162,700</td>
          </tr>
          <tr class="bg-white">
              <td>Rhona Davidson</td>
              <td>Integration Specialist</td>
              <td>Tokyo</td>
              <td>55</td>
              <td>2010/10/14</td>
              <td>$327,900</td>
          </tr>
          <tr class="bg-dark-grey">
              <td>Brielle Williamson</td>
              <td>Integration Specialist</td>
              <td>New York</td>
              <td>61</td>
              <td>2012/12/02</td>
              <td>$372,000</td>
          </tr>
          <tr class="bg-dark-grey">
              <td>Paul Byrd</td>
              <td>Chief Financial Officer (CFO)</td>
              <td>New York</td>
              <td>64</td>
              <td>2010/06/09</td>
              <td>$725,000</td>
          </tr>
          <tr class="bg-dark-grey">
              <td>Gloria Little</td>
              <td>Systems Administrator</td>
              <td>New York</td>
              <td>59</td>
              <td>2009/04/10</td>
              <td>$237,500</td>
          </tr>
          <tr class="bg-white">
              <td>Jena Gaines</td>
              <td>Office Manager</td>
              <td>London</td>
              <td>30</td>
              <td>2008/12/19</td>
              <td>$90,560</td>
          </tr>
          <tr class="bg-white">
              <td>Haley Kennedy</td>
              <td>Senior Marketing Designer</td>
              <td>London</td>
              <td>43</td>
              <td>2012/12/18</td>
              <td>$313,500</td>
          </tr>
          <tr class="bg-white">
              <td>Tatyana Fitzpatrick</td>
              <td>Regional Director</td>
              <td>London</td>
              <td>19</td>
              <td>2010/03/17</td>
              <td>$385,750</td>
          </tr>
          <tr class="bg-white">
              <td>Michael Silva</td>
              <td>Marketing Designer</td>
              <td>London</td>
              <td>66</td>
              <td>2012/11/27</td>
              <td>$198,500</td>
          </tr>
          <tr class="bg-white">
              <td>Bradley Greer</td>
              <td>Software Engineer</td>
              <td>London</td>
              <td>41</td>
              <td>2012/10/13</td>
              <td>$132,000</td>
          </tr>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

在这里，我手动使用了tr class bg-white和bg-dark-grey。但是，在实际情况下，在php上有一个简单的逻辑。就像

$bg_class = '';
foreach($data as $dv){
    if($old_office != $dv->office){
        if($bg_class == 'bg-white'){
            $bg_class = 'bg-dark-grey';
        }else{
            $bg_class = 'bg-white';
        }
        $old_office = $dv->office;
    }
}

但是，您可以忽略此php逻辑，只需记住最初在办公室的偶数行组中将有background: dark-grey。在这种初始情况下：San Francisco and New York将具有背景，因为它们是偶数行（办公室）组。

Edinburgh
San Francisco //even (bg-grey)
Tokyo
New York //even (bg-grey)
London

要订购office列以外的其他列，将不会有任何行成为背景，我已经为该行实现了逻辑。 但是，每当我尝试对office列进行排序时。让我们考虑sorting_asc的条件：

Edinburgh
London
New York //(bg-grey)
San Francisco //(bg-grey)
Tokyo

在这种情况下，错误的行组具有背景。由于它是客户端数据表，因此不会再次执行php逻辑。因此，我需要一些帮助，以便可以在根据Office列对其进行排序时将bacground添加到正确的组中。所以我想要的结果是：

## For sorting_asc（办公室列）

Edinburgh
Edinburgh
Edinburgh
Edinburgh
London //desired-grey-row
London //desired-grey-row
London //desired-grey-row
London //desired-grey-row
London //desired-grey-row
New York 
New York 
New York 
San Francisco //desired-grey-row
San Francisco //desired-grey-row
Tokyo
Tokyo
Tokyo

## For sorting_desc（办公室列）（考虑组而不是单行）

Tokyo
San Francisco //desired-grey-row
New York 
London //desired-grey-row
Edinburgh

即每个偶数行都需要具有灰色背景。

1 个答案:

答案 0 :(得分：1)

确定-这是一种突出显示交替的办公室行的javascript方法：

function highlightRows() {
  let t = document.getElementById("example");
  let tbody = t.getElementsByTagName("tbody")[0];
  let lastoffice = "";
  let lastclass = "bg-dark-grey";
  for (let r = 0; r < tbody.rows.length; r++) {
    let thisrow = tbody.rows[r];
    let thisoffice = thisrow.cells[2].innerHTML;
    if (thisoffice != lastoffice) {
      lastclass = (lastclass == "bg-dark-grey")? "bg-white": "bg-dark-grey";
      lastoffice = thisoffice;
      thisrow.className = lastclass;
    } else {
      thisrow.className = lastclass;
    }
  
  }
}

// for testing purposes only
window.onload = highlightRows;
.bg-dark-grey{
  background-color: rgba(0,0,0,.05) !important;
}
.bg-white{
  background-color: #ffffff !important;
}
<table id="example" class="xdisplay" style="width:100%">
  <thead>
      <tr>
          <th class="no-sort">Name</th>
          <th class="no-sort">Position</th>
          <th class="office">Office</th>
          <th>Age</th>
          <th class="no-sort">Start date</th>
          <th>Salary</th>
      </tr>
  </thead>
  <tbody>
      <tr class="bg-white">
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr class="bg-white">
        <td>Quinn Flynn</td>
        <td>Support Lead</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2013/03/03</td>
        <td>$342,000</td>
    </tr>
    <tr class="bg-white">
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
    </tr>
    <tr class="bg-white">
        <td>Sonya Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>2008/12/13</td>
        <td>$103,600</td>
    </tr>
    <tr class="bg-dark-grey">
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
    <tr class="bg-dark-grey">
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
    </tr>
    <tr class="bg-white">
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
    <tr class="bg-white">
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
    </tr>
    <tr class="bg-white">
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>2010/10/14</td>
        <td>$327,900</td>
    </tr>
    <tr class="bg-dark-grey">
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
    </tr>
    <tr class="bg-dark-grey">
        <td>Paul Byrd</td>
        <td>Chief Financial Officer (CFO)</td>
        <td>New York</td>
        <td>64</td>
        <td>2010/06/09</td>
        <td>$725,000</td>
    </tr>
    <tr class="bg-dark-grey">
        <td>Gloria Little</td>
        <td>Systems Administrator</td>
        <td>New York</td>
        <td>59</td>
        <td>2009/04/10</td>
        <td>$237,500</td>
    </tr>
    <tr class="bg-white">
        <td>Jena Gaines</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>30</td>
        <td>2008/12/19</td>
        <td>$90,560</td>
    </tr>
    <tr class="bg-white">
        <td>Haley Kennedy</td>
        <td>Senior Marketing Designer</td>
        <td>London</td>
        <td>43</td>
        <td>2012/12/18</td>
        <td>$313,500</td>
    </tr>
    <tr class="bg-white">
        <td>Tatyana Fitzpatrick</td>
        <td>Regional Director</td>
        <td>London</td>
        <td>19</td>
        <td>2010/03/17</td>
        <td>$385,750</td>
    </tr>
    <tr class="bg-white">
        <td>Michael Silva</td>
        <td>Marketing Designer</td>
        <td>London</td>
        <td>66</td>
        <td>2012/11/27</td>
        <td>$198,500</td>
    </tr>
    <tr class="bg-white">
        <td>Bradley Greer</td>
        <td>Software Engineer</td>
        <td>London</td>
        <td>41</td>
        <td>2012/10/13</td>
        <td>$132,000</td>
    </tr>
  </tbody>
</table>

您可以直接从“文档就绪”函数调用此函数（虽然使用window.onload可以达到相同目的，但仅出于测试目的）。如果您按年龄或薪水进行排序，那么您现有的代码将去除灰色背景，这样就可以了，但是如果您按办公室进行排序，则可以再次调用此函数。

我肯定也有php或jquery方法，但是我倾向于使用香草javascript。

相关问题
最新问题