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
4 answers
solution1
3 2018-02-04 08:18:54
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.
solution2
2 2018-02-04 07:58:41
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.
solution3
0 2018-02-04 07:18:58
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.
solution4
0 2018-02-04 12:53:30
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 s to give them height --> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.