HTML, How To Add Data To A Table In Column-wise Using JQuery?
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 acco
Solution 1:
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.
Solution 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.
Solution 3:
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.
Solution 4:
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>
Post a Comment for "HTML, How To Add Data To A Table In Column-wise Using JQuery?"