HTML, How to add data to a table in column-wise using jQuery?

Question

I have an empty HTML table. Once I Press the button, data should be inserted to each cell in column order. After filling first column, it should go to the next column and fill accordingly.How can I accomplish this using j Query? I shall provide my html code below:

<html>
<head>
    <style>
        table, th, td {
            border: 1px dashed black;
        }
    </style>
</head>
<body>
    <button onclick="callNext()">NEXT</button>
    <table>
          <tr>
            <td>A0501</td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
    </table>


    <script type="text/javascript">
        function callNext() {

        }
    </script>

</body>

Here is the screenshot of what I required.

Edit : The new data should not be inserted below old data. but new data should be inserted to the first column in the first row. and old data should come below the new data.please check my screenshots

Please note that insert the new data on top of column and old value should come down at the same time.please refer my screenshots — MUHAMMED IQBAL PA
– MUHAMMED IQBAL PA, Commented Feb 4, 2018 at 8:42
you should add this description with the edit heading in the end of your post so that others dont get down voted by new visitors — Muhammad Omer Aslam
– Muhammad Omer Aslam, Commented Feb 4, 2018 at 8:43

Supun Abesekara · Accepted Answer · 2018-02-04 09:25:31Z

3

var nextCount = 1;

function callNext()
{
    var tr_count = 1;
    $('td').each(function(e)
    {
        tr_count++;
    });
    for (var i = tr_count - 1; i >= 1; i--)
    {
        var nextTd = i + 1;
        // alert(i);
        $('#' + nextTd).html($('#' + i).html())
    }
    $('#1').text(nextCount); // Your data
    nextCount++;
}

$('tr').each(function(e)
{
    e = e + 1;
    var count = e;
    var tdCount = 0;
    $(this).find('td').each(function()
    {
        if (tdCount == 0)
        {
            $(this).attr('id', e);
        }
        else
        {
            count = count + 4;
            $(this).attr('id', count);
        }
        tdCount++;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <style>
        table, th, td {
            border: 1px dashed black;
        }
    </style>
</head>
<body>
    <button onclick="callNext()">NEXT</button>
    <table>
          <tr>
            <td>A0501</td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
    </table>

This code will help you.

edited Feb 4, 2018 at 9:25

answered Feb 4, 2018 at 8:18

Supun Abesekara

7368 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MUHAMMED IQBAL PA Over a year ago

Thank you. when I run your code, the new data is inserted below old data. but new data should be inserted to the first column in the first row. and old data should come below the new data. can you please check my screenshot and update the answer>

Supun Abesekara Over a year ago

@MUHAMMEDIQBALPA i add modification to my code it will work for you.

MUHAMMED IQBAL PA Over a year ago

@ Lakmal Abesekara Thank you for your time

Muhammad Omer Aslam · Accepted Answer · 2018-02-04 08:22:55Z

2

See below is how you need to do it using the counters for each row and cells. Keep the count of the max rows and keep iterating them until the last row reached in the column, then increment the tdCounter by 1 and reset the rowCounter back to 0 to start again from the top.

See Demo Below

var tdCounter = 0;
var rowCounter = 0;
var rows = $("#my-table").find('tr').length;

$("#next").click(function() {

  $("#my-table tr:eq(" + rowCounter + ")").each(function(index) {
    $(this).find("td:eq(" + tdCounter + ")").text(index);
    rowCounter++;
    if (rowCounter !== 0 && (rowCounter % rows === 0)) {
      tdCounter++;
      rowCounter = 0;
    }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px dashed black;
    }
  </style>
</head>

<body>
  <button id="next">NEXT</button>
  <table id="my-table">
    <tr>
      <td>A0501</td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </table>

</body>

Hope that helps you out.

edited Feb 4, 2018 at 8:22

answered Feb 4, 2018 at 7:58

Muhammad Omer Aslam

23.9k9 gold badges47 silver badges69 bronze badges

2 Comments

MUHAMMED IQBAL PA Over a year ago

when I run your code, the new data is inserted below old data. But my requirement is, insert new data to the top of column and old value should come down at the same time. Please refer my screenshots.

Muhammad Omer Aslam Over a year ago

wow that wasn't listed anywhere you should have written it specifically as none of the solutions provided could guess that you actually wanted this way, as it is the main thing and it would be a totally different solution and would require re-thinking. @MUHAMMEDIQBALPA , let me see what I can do about it now.

Aqib Ashef · Accepted Answer · 2018-02-04 07:41:29Z

0

You should write something like this:

$(document).ready(function(){
    var rowIndex = 0;
    var rows = $(tr);

    function callNext(){
        updateRowIndex();
        rows[rowIndex].insert('<td>'+ 'Your Data' +'</td>');
    }

    function updateRowIndex(){
        rowIndex = (rowIndex + 1) % numberOfRow;
    }
});

This pseudo code should give you an idea about how to insert data column-wise.

edited Feb 4, 2018 at 7:41

answered Feb 4, 2018 at 7:18

Aqib Ashef

6518 silver badges20 bronze badges

2 Comments

MUHAMMED IQBAL PA Over a year ago

Hi Aqib, I need to insert into a cell on each click, not simultaneously.

Aqib Ashef Over a year ago

Sorry got it wrong first time. This logic should give you what you want. :)

AuxTaco · Accepted Answer · 2018-02-04 12:53:30Z

If you're only using the <table> to show the data in a grid, and you don't care about supporting Internet Explorer, you can offload most of the logic for this to CSS with a CSS grid.

$('button').on('click', () => {
  // Make a new <div> with some data
  const hue = Math.floor(Math.random() * 24) * 15;
  const $div = $(`<div style="background: hsl(${hue}, 80%, 80%)">${hue}</div>`);

  // Put it at the top of the grid
  $('.data-grid').prepend($div);

  // And remove the bumped <div> from the end
  $('.data-grid > :last-child').remove();
});

.data-grid {
  display: grid; /* CSS grid */
  grid-auto-flow: column; /* fill grid top to bottom, then left to right */
  grid-template-columns: repeat(4, 50px); /* 4 columns, 50px wide */
  grid-template-rows: repeat(4, auto); /* 4 rows, as tall as their content */
  grid-gap: 3px; /* 3px of gutter between items */
}

.data-grid div {
  border: 1px dashed black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>NEXT</button>
<div class="data-grid">
  <!-- 16 <div>s with &nbsp;s to give them height -->
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
</div>

Collectives™ on Stack Overflow

HTML, How to add data to a table in column-wise using jQuery?

4 Answers 4

3 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related