Question 36035 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Dynamically add column to table and it's td's – Jquery

I have a table that is already defined and populated. Now what I’m trying to do is to find a 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. What can I do to move the content after/before adding a new column?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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() {
    $(this).children().eq(th.index()).after('<tr></tr>');
  });
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search