jQuery 设置表格行宽度百分比的背景色

在本文中，我们将介绍如何使用jQuery来设置表格行宽度百分比的背景色。具体来说，我们将使用jQuery的CSS方法来实现这个效果。

1. 创建表格

首先，我们需要创建一个包含数据的表格。以下是一个简单的示例：

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Percentage</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30%</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>50%</td>
  </tr>
  <tr>
    <td>Mike</td>
    <td>70%</td>
  </tr>
  <tr>
    <td>Lisa</td>
    <td>90%</td>
  </tr>
</table>

在这个表格中，我们有两列：姓名和百分比。我们将根据百分比的大小来设置相应行的背景色。

2. 使用jQuery设置背景色

接下来，我们将使用jQuery的CSS方法来设置行的背景色。我们可以使用百分比来计算每个行的宽度，并根据宽度设置背景色。

$(document).ready(function() {
  $("#myTable tr").each(function() {
    var percentage = parseInt($(this).find("td:nth-child(2)").text());
    var width = percentage / 100 * $("#myTable").width();
    $(this).find("td:nth-child(2)").css("background-color", "rgba(0, 0, 255, 0.3)");
    $(this).find("td:nth-child(2)").width(width);
  });
});

在上面的代码中，我们首先使用了jQuery的each方法来遍历每个表格行（tr元素）。然后，我们使用find方法来获取每行的第二个单元格（td元素）的百分比值。接下来，我们根据百分比值计算对应行的宽度，并使用CSS方法设置背景色为蓝色。最后，我们将该行的宽度设置为计算所得的值。