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;
functioncallNext()
{
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++;
});
});<scriptsrc="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><buttononclick="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;
}
returnfalse;
});
});<scriptsrc="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><buttonid="next">NEXT</button><tableid="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);
functioncallNext(){
updateRowIndex();
rows[rowIndex].insert('<td>'+ 'Your Data' +'</td>');
}
functionupdateRowIndex(){
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 dataconst 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-griddiv {
border: 1px dashed black;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button>NEXT</button><divclass="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?"