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 positionvar headerIndex = $("table thead tr th[value=9]").index();
  // Determine the vertical positionvar columnIndex = $("tbody tr:has(td[value=2017-20-9])").index();
  
  // Fill the row with cells to set the horizontal position appropriatelywhile($("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>");
  }
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="table"><thead><tr><th> Date </th><thvalue='2'> Completed </th><thvalue='4'> Cancelled </th><thvalue='5'> Pending </th><thvalue='1'> Arrived </th><thvalue='9'> Waiting </th><thvalue='10'> Cancelled Provider</th></tr></thead><tbody><tr><tdvalue='2017-20-8'>2017-20-8</td></tr><tr><tdvalue='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.