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

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