JQuery insert cell to specific position of tr value and td value

问题

I am having a table contain the following structure:

The status in thead having value with unique number, and the date also having a unique value of the date itself.

What I want is to add cell after matching the (cell status and cell date),

so , I am having the following 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"
  }
}

So I want to enter the order status under two specific data (match the thead th order status + match the json element with tbody td date).

I tried this jquery code and it's not working:

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

and this is my sample code in a snippet:

$("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>

回答1:

Constructs like this thead:tr:th are invalid css selectors, you need to use something like this instead thead tr th.

To achieve what you want you can do this:

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

I've added some comments to explain what the code does.

The basic idea is to determine the header's position (its index) and the column's position.

You can't just add a column to a row at a given horizontal position, you'll have to fill the row with cells up to that position in order to arrange the cell horizontally.

来源：https://stackoverflow.com/questions/44039352/jquery-insert-cell-to-specific-position-of-tr-value-and-td-value