使用jquery

Question

我有一个html表格，我希望根据某个列直观地对数据进行分组。

＆＃13;

＆＃13;

body {
  font: normal medium/1.4 sans-serif;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
th{
  background: #eee;
}

＆＃13;

<table>
<thead>
  <th>Item No</th>
  <th>Item Name</th>
  <th>Qty</th>
  <th>Expiry Date</th>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>ABC</td>
    <td>100</td>
    <td>01-Mar-2016</td>
  </tr>
    <tr>
    <td>1</td>
    <td>ABC</td>
    <td>50</td>
    <td>25-Mar-2016</td>
  </tr>
    <tr>
    <td>1</td>
    <td>ABC</td>
    <td>10</td>
    <td>05-Apr-2016</td>
  </tr>
    <tr>
    <td>2</td>
    <td>XYZ</td>
    <td>100</td>
    <td>01-Jan-2016</td>
  </tr>
    <tr>
    <td>2</td>
    <td>XYZ</td>
    <td>10</td>
    <td>01-Mar-2016</td>
  </tr>
    <tr>
    <td>3</td>
    <td>DEF</td>
    <td>100</td>
    <td>01-Mar-2016</td>
  </tr>
  <tr>
    <td>4</td>
    <td>PQR</td>
    <td>100</td>
    <td>05-Mar-2016</td>
  </tr>
    <tr>
    <td>4</td>
    <td>PQR</td>
    <td>100</td>
    <td>01-Nov-2016</td>
  </tr>
    <tr>
    <td>5</td>
    <td>IJK</td>
    <td>45</td>
    <td>15-May-2016</td>
  </tr>
    <tr>
    <td>6</td>
    <td>LMN</td>
    <td>99</td>
    <td>31-Dec-2016</td>
  </tr>
</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

在这个例子中，我希望所有具有相似项目编号的行具有相同的颜色，并且颜色需要针对不同的组不同，并且可以有n个。组或行。

Answer 1

尝试创建.length等于最大商品ID号的颜色数组，使用.each()来迭代tr元素，.text()第一个td元素引用包含颜色的数组的索引来设置

var colors = ["dodgerblue", "gold", "tan", "orange", "gray", "green"]

$("tr").each(function(i, el) {
  var item = $("td:first", this).text();
  $(this).css("background", colors[item -1])
})

＆＃13;

＆＃13;

var colors = ["dodgerblue", "gold", "tan", "orange", "gray", "green"];

$("tr").each(function(i, el) {
  var item = $("td:first", this).text();
  $(this).css("background", colors[item -1])
})

＆＃13;

body {
  font: normal medium/1.4 sans-serif;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}

th {
  background: #eee;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table>
  <thead>
    <th>Item No</th>
    <th>Item Name</th>
    <th>Qty</th>
    <th>Expiry Date</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>ABC</td>
      <td>100</td>
      <td>01-Mar-2016</td>
    </tr>
    <tr>
      <td>1</td>
      <td>ABC</td>
      <td>50</td>
      <td>25-Mar-2016</td>
    </tr>
    <tr>
      <td>1</td>
      <td>ABC</td>
      <td>10</td>
      <td>05-Apr-2016</td>
    </tr>
    <tr>
      <td>2</td>
      <td>XYZ</td>
      <td>100</td>
      <td>01-Jan-2016</td>
    </tr>
    <tr>
      <td>2</td>
      <td>XYZ</td>
      <td>10</td>
      <td>01-Mar-2016</td>
    </tr>
    <tr>
      <td>3</td>
      <td>DEF</td>
      <td>100</td>
      <td>01-Mar-2016</td>
    </tr>
    <tr>
      <td>4</td>
      <td>PQR</td>
      <td>100</td>
      <td>05-Mar-2016</td>
    </tr>
    <tr>
      <td>4</td>
      <td>PQR</td>
      <td>100</td>
      <td>01-Nov-2016</td>
    </tr>
    <tr>
      <td>5</td>
      <td>IJK</td>
      <td>45</td>
      <td>15-May-2016</td>
    </tr>
    <tr>
      <td>6</td>
      <td>LMN</td>
      <td>99</td>
      <td>31-Dec-2016</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

jsfiddle https://jsfiddle.net/5t1oo1zm/8/

Answer 2

我修改了guest271314的答案，以便更好地适应您的n个群组。具有n量的预定义颜色列表是不合理的并且最终会令人不悦。我建议在一组颜色之间交替。

<强> SCRIPT

var colors = ["dodgerblue", "gold", "tan", "orange", "gray", "green"]

$("tr").each(function(i, el) {
  var item = $("td:first", this).text();
    $(this).css("background", colors[item%7]);    
});

查看一个工作示例：https://jsfiddle.net/5t1oo1zm/56/