HTML，如何使用jQuery以列方式向表中添加数据? [英] HTML, How to add data to a table in column-wise using jQuery?
问题描述
我有一个空的HTML表.一旦按下按钮，数据应按列顺序插入到每个单元格中.填充第一列后，应转到下一列并进行相应填充.如何使用j Query完成此操作? 我将在下面提供我的html代码:
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
推荐答案
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.
这篇关于HTML，如何使用jQuery以列方式向表中添加数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
