Question

我想填写一张包含来自php请求的内容的表格。根据内容我有4个状态我想用来定义bootstrap TR类。

以下是我的代码段。我已经将课程分配给了TR，但这可能需要更改。

该规则应已在下面的代码段中的TR类中显示。

条件如下：

预期= bg-success

已取消= bg-danger

Inhouse = bg-info

部分= bg警告

已完成= bg-active

Sine我想使用php foreach或者填充表格，如何使用javascript或jquery让表格改变行动态？

function reservationListFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("reservationListInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("reservationTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

jQuery(document).ready(function($) {
    $('#reservationTable tr').each(function () {
       var td_value = $('td',this).eq(3).text();
       switch (td_value) {
           case 'Partial':
                $(this).addClass('bg-warning');
               break;
               ....
               And So On
               ....
           default:
               // statements_def
               break;
       }
    });
});

#reservationListInput {
  background-image: url('./assets/fonts/searchicon.png');
  /* Add a search icon to input */
  background-position: 10px 12px;
  /* Position the search icon */
  background-repeat: no-repeat;
  /* Do not repeat the icon image */
  width: 100%;
  /* Full-width */
  font-size: 16px;
  /* Increase font-size */
  padding: 12px 20px 12px 40px;
  /* Add some padding */
  border: 1px solid #ddd;
  /* Add a grey border */
  margin-bottom: 12px;
  /* Add some space below the input */
}

#reservationTable {
  border-collapse: collapse;
  /* Collapse borders */
  width: 100%;
  /* Full-width */
  border: 1px solid #ddd;
  /* Add a grey border */
  font-size: 18px;
  /* Increase font-size */
}

#reservationTable th,
#reservationTable td {
  text-align: left;
  /* Left-align text */
  padding: 12px;
  /* Add padding */
}

#reservationTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#reservationTable tr.header,
#reservationTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">

<table id="reservationTable">
  <tr class="header">
    <th style="width:40%;">Name</th>
    <th style="width:20%;">Cabin</th>
    <th style="width:20%;">Table</th>
    <th style="width:20%;">Status</th>
  </tr>
  <tr class="bg-success">
    <td>Alfreds Futterkiste</td>
    <td>49222</td>
    <td>201</td>
    <td>Expected</td>
  </tr>
  <tr class="bg-info">
    <td>Berglunds snabbkop</td>
    <td>12846</td>
    <td>300</td>
    <td>Inhouse</td>
  </tr>
  <tr class="bg-danger">
    <td>Island Trading</td>
    <td>11847</td>
    <td>234</td>
    <td>Cancelled</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>9876</td>
    <td>253</td>
    <td>Partial</td>
  </tr>
</table>

Answer 1

希望这会给你一些见解......

jQuery(document).ready(function($) {
    $('#reservationTable tr').each(function () {
       var td_value = $('td',this).eq(3).text();
       switch (td_value) {
           case 'Partial':
                $(this).addClass('bg-warning');
               break;
               ....
               And So On
               ....
           default:
               // statements_def
               break;
       }
    });
});

Answer 2

如果问题是bootstrap类不能正常工作......那么我的答案就是你问题的解决方案。

你没有在你的html页面中包含bootstrap CSS文件，或者在这样做时犯了一些错误。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

这是您应该在<head></head>代码中添加的行。

以下是演示：DEMO for you code

仔细观察，我没有更改代码中的任何内容。

P.S。如果这不是解决方案，那么我无法理解你的问题。

Answer 3

您可以使用jQuery迭代status列，并根据文字设置background-color：

var colors = {
  Expected: '#90EE90',
  Inhouse: '#ADD8E6',
  Cancelled: '#FF0000',
  Partial: '#FFA500'
};

$('tr td:nth-child(4)').each(function() {
  $this = $(this);  
  $this.parent().css('background-color', colors[$this.text()]);
});

#reservationListInput {
  background-image: url('./assets/fonts/searchicon.png');
  /* Add a search icon to input */
  background-position: 10px 12px;
  /* Position the search icon */
  background-repeat: no-repeat;
  /* Do not repeat the icon image */
  width: 100%;
  /* Full-width */
  font-size: 16px;
  /* Increase font-size */
  padding: 12px 20px 12px 40px;
  /* Add some padding */
  border: 1px solid #ddd;
  /* Add a grey border */
  margin-bottom: 12px;
  /* Add some space below the input */
}

#reservationTable {
  border-collapse: collapse;
  /* Collapse borders */
  width: 100%;
  /* Full-width */
  border: 1px solid #ddd;
  /* Add a grey border */
  font-size: 18px;
  /* Increase font-size */
}

#reservationTable th,
#reservationTable td {
  text-align: left;
  /* Left-align text */
  padding: 12px;
  /* Add padding */
}

#reservationTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#reservationTable tr.header,
#reservationTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">

<table id="reservationTable">
  <tr class="header">
    <th style="width:40%;">Name</th>
    <th style="width:20%;">Cabin</th>
    <th style="width:20%;">Table</th>
    <th style="width:20%;">Status</th>
  </tr>
  <tr class="bg-success">
    <td>Alfreds Futterkiste</td>
    <td>49222</td>
    <td>201</td>
    <td>Expected</td>
  </tr>
  <tr class="bg-info">
    <td>Berglunds snabbkop</td>
    <td>12846</td>
    <td>300</td>
    <td>Inhouse</td>
  </tr>
  <tr class="bg-danger">
    <td>Island Trading</td>
    <td>11847</td>
    <td>234</td>
    <td>Cancelled</td>
  </tr>
  <tr class="bg-warning">
    <td>Koniglich Essen</td>
    <td>9876</td>
    <td>253</td>
    <td>Partial</td>
  </tr>
</table>

Answer 4

这是我的答案的实例......

jQuery(document).ready(function($) {
    $('#reservationTable tr').each(function () {
       var td_value = $('td',this).eq(3).text();
       console.log(td_value);
       switch (td_value) {
           case 'Expected':
                $(this).addClass('bg-success');
               break;

           default:
               // statements_def
               break;
       }
    });
});

#reservationListInput {
  background-image: url('./assets/fonts/searchicon.png');
  /* Add a search icon to input */
  background-position: 10px 12px;
  /* Position the search icon */
  background-repeat: no-repeat;
  /* Do not repeat the icon image */
  width: 100%;
  /* Full-width */
  font-size: 16px;
  /* Increase font-size */
  padding: 12px 20px 12px 40px;
  /* Add some padding */
  border: 1px solid #ddd;
  /* Add a grey border */
  margin-bottom: 12px;
  /* Add some space below the input */
}

#reservationTable {
  border-collapse: collapse;
  /* Collapse borders */
  width: 100%;
  /* Full-width */
  border: 1px solid #ddd;
  /* Add a grey border */
  font-size: 18px;
  /* Increase font-size */
}

#reservationTable th,
#reservationTable td {
  text-align: left;
  /* Left-align text */
  padding: 12px;
  /* Add padding */
}

#reservationTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#reservationTable tr.header,
#reservationTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">

<table id="reservationTable">
  <tr class="header">
    <th style="width:40%;">Name</th>
    <th style="width:20%;">Cabin</th>
    <th style="width:20%;">Table</th>
    <th style="width:20%;">Status</th>
  </tr>
  <tr class="">
    <td>Alfreds Futterkiste</td>
    <td>49222</td>
    <td>201</td>
    <td>Expected</td>
  </tr>
  <tr class="">
    <td>Berglunds snabbkop</td>
    <td>12846</td>
    <td>300</td>
    <td>Inhouse</td>
  </tr>
  <tr class="">
    <td>Island Trading</td>
    <td>11847</td>
    <td>234</td>
    <td>Cancelled</td>
  </tr>
  <tr class="">
    <td>Koniglich Essen</td>
    <td>9876</td>
    <td>253</td>
    <td>Partial</td>
  </tr>
</table>

如何使用Javascript基于内容更改表行颜色

4 个答案: