Question

我的表格包含以下结构：

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

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

所以，我有以下JSON：

div {
    margin-top:90px;
    margin-left:90px;
    background-color:#676896;
    overflow: hidden; /*expends its height if not fixed*/
}

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

我试过这个jquery代码并且它无法正常工作：

{
  "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"
  }
}

这是我在代码段中的示例代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

要实现您的目标，您可以这样做：

＆＃13;

$(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>");
  }
});

＆＃13;

<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>

＆＃13;

我添加了一些注释来解释代码的用途。

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

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

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

1 个答案: