JQuery将单元格插入到tr值和td值的特定位置

Question

我的表格包含以下结构：

广告中的状态具有唯一编号， 并且日期也具有日期本身的唯一值。

我想要的是在匹配（单元格状态和单元格日期）之后添加单元格，

所以，我有以下 JSON：

{
  "data": [
    [
      {
        "orderStatus": 2,
        "date_formatted": "15-05-2017",
        "counter": 2
      },
      {
        "orderStatus": 4,
        "date_formatted": "15-05-2017",
        "counter": 14
      },
      {
        "orderStatus": 5,
        "date_formatted": "15-05-2017",
        "counter": 12
      },
      {
        "orderStatus": 11,
        "date_formatted": "15-05-2017",
        "counter": 6
      }
    ],
    [
      {
        "orderStatus": 2,
        "date_formatted": "16-05-2017",
        "counter": 6
      },
      {
        "orderStatus": 4,
        "date_formatted": "16-05-2017",
        "counter": 15
      },
      {
        "orderStatus": 5,
        "date_formatted": "16-05-2017",
        "counter": 12
      },
      {
        "orderStatus": 11,
        "date_formatted": "16-05-2017",
        "counter": 5
      }
    ],
    [
      {
        "orderStatus": 2,
        "date_formatted": "17-05-2017",
        "counter": 4
      },
      {
        "orderStatus": 4,
        "date_formatted": "17-05-2017",
        "counter": 10
      },
      {
        "orderStatus": 5,
        "date_formatted": "17-05-2017",
        "counter": 13
      },
      {
        "orderStatus": 11,
        "date_formatted": "17-05-2017",
        "counter": 6
      }
    ]
  ],
  "status_name": {
    "1": "New",
    "2": "Pending",
    "3": "On Way",
    "4": "Completed",
    "5": "Cancelled Client",
    "6": "Time out",
    "7": "Secluded",
    "8": "On Progress",
    "9": "Receipt created",
    "10": "Provider Arrive",
    "11": "Provider cancelled",
    "12": "Provider start the work",
    "13": "Provider paused the work",
    "14": "No Provider Available"
  }
}

所以我想在两个具体数据下输入订单状态（匹配thead订单状态+匹配json元素和tbody td日期）。

我尝试了这个 jquery 代码，但它不起作用：

$("table thead:tr:th[value='2'] tbody:tr:td:[value='2017-20-9']").after(data["data"][count]["counter"]);

这是我在 sn-p 中的示例代码：

$("table thead:tr:th[value='2'] tbody:tr:td:[value='2017-20-9']").after("<td>Test</td>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="table">
    <thead>
      <tr>
            <th value='2'> Completed </th>
            <th value='4'> Cancelled </th>
            <th value='5'> Pending </th>
            <th value='1'> Arrived </th>
            <th value='9'> Waiting </th>
            <th value='10'> Cancelled Provider</th>

      </tr>
    </thead>
    <tbody>
        <tr>
            <td value='2017-20-8'>2017-20-8</td>
        </tr>
                <tr>
            <td value='2017-20-9'>2017-20-9</td>
        </tr>
    </tbody>
</table>

Answer 1

像 thead:tr:th 这样的构造是无效的 css 选择器，你需要使用像这样的东西而不是 thead tr th。

要实现你想要的，你可以这样做：

$(function(){
  // Determine the horizontal position
  var headerIndex = $("table thead tr th[value=9]").index();
  // Determine the vertical position
  var columnIndex = $("tbody tr:has(td[value=2017-20-9])").index();
  
  // Fill the row with cells to set the horizontal position appropriately
  while($("tbody tr").eq(columnIndex).find("td").length < headerIndex){
    $("tbody tr").eq(columnIndex).append("<td></td>");
  }
  
  // Check if there is already a cell at the given index and if it is, change its text otherwise add a new cell.
  if($("tbody tr").eq(columnIndex).find("td").eq(headerIndex).length){
    $("tbody tr").eq(columnIndex).find("td").eq(headerIndex).text("Inserted");
  }else{
    $("tbody tr").eq(columnIndex).append("<td>Inserted</td>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
    <thead>
      <tr>
            <th> Date </th>
            <th value='2'> Completed </th>
            <th value='4'> Cancelled </th>
            <th value='5'> Pending </th>
            <th value='1'> Arrived </th>
            <th value='9'> Waiting </th>
            <th value='10'> Cancelled Provider</th>

      </tr>
    </thead>
    <tbody>
        <tr>
            <td value='2017-20-8'>2017-20-8</td>
        </tr>
                <tr>
            <td value='2017-20-9'>2017-20-9</td>
        </tr>
    </tbody>
</table>

我添加了一些 cmets 来解释代码的作用。

基本思想是确定标题的位置（它的索引）和列的位置。

您不能只在给定水平位置的行中添加一列，您必须使用直到该位置的单元格填充该行才能水平排列单元格。