Dynamically add column to table and it's td's-CodePudding

I've a table which is already defined and populated. Now what I'm trying to do is to find an specific column and after that create a new column, at the moment I have the code to handle this:

$(document).ready(function() {
  something();
});

function something() {
  var newTh = "";
  var th = $(`#tblTable th[data-something="1"]`).last();
  newTh = `<th data-something="1-1">
                        New Column
                    </th>`;

  th.after(newTh);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
  <thead>
    <tr>
      <th>Id</th>
      <th data-something="1">Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody id="tblBody">
    <tr>
      <td>1</td>
      <td>a</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>a</td>
      <td>100</td>
    </tr>
    <tr>
      <td>3</td>
      <td>a</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

The column is added properly but it's keeping the value from the pre-existing column so, my question is, what can I do to move the content after/before adding a new column.

CodePudding user response：

You can get the index of th element, and then you can find each tr to append New Column td value. Like below:

$(document).ready(function() {
    something();
});

function something() {
    var newTh = "";
    var th = $(`#tblTable th[data-something="1"]`).last();
    var index = th.index();
    newTh = `<th data-something="1-1">New Column</th>`;

    th.after(newTh);

    $("#tblBody").find("tr").each(function(){
        var tr = $(this);
        tr.find("td").eq(index).after(`<td>new column value</td>`);
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
    <thead>
        <tr>
            <th>Id</th>
            <th data-something="1">Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody id="tblBody">
        <tr>
            <td>1</td>
            <td>a</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>a</td>
            <td>100</td>
        </tr>
        <tr>
            <td>3</td>
            <td>a</td>
            <td>100</td>
        </tr>
    </tbody>
</table>

CodePudding user response：

The easiest method would be to add another <td> in each <tr> and copy the text into the new <td>.

This works because each <th> must be at the same index as each <tr>.

$(document).ready(function() {
  something();
});

function something() {
  const th = $('#tblTable th[data-something="1"]').last();
  th.after('<th data-something="1-1">New Column</th>');
  $('#tblTable tbody').children().each(function() {
    const old = $(this).children().eq(th.index() 1);
    old.after(old.html());
    old.html('');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
  <thead>
    <tr>
      <th>Id</th>
      <th data-something="1">Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody id="tblBody">
    <tr>
      <td>1</td>
      <td>a</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>a</td>
      <td>100</td>
    </tr>
    <tr>
      <td>3</td>
      <td>a</td>
      <td>100</td>
    </tr>
  </tbody>
</table>