HTML，如何使用jQuery以列方式向表中添加数据？
[英]HTML, How to add data to a table in column-wise using jQuery?
问题描述
我有一个空的HTML表。 一旦按下按钮，数据应按列顺序插入到每个单元格中。 填充第一列后，应转到下一列并进行相应填充。如何使用j Query完成此操作？ 我将在下面提供我的html代码：
<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>
这是我需要的屏幕截图。
编辑：不应将新数据插入旧数据下方。 但应将新数据插入第一行的第一列。 并且旧数据应该在新数据之下。请检查我的屏幕截图
4 个解决方案
解决方案1
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>
此代码将为您提供帮助。
解决方案2
2 2018-02-04 07:58:41
下文说明了如何使用每一行和单元格的计数器来执行此操作。 保留最大行的计数，并对其进行迭代，直到到达该列的最后一行为止，然后将tdCounter递增1 ，并将rowCounter重置为0以从顶部重新开始。
请参阅下面的演示
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>
希望对您有所帮助。
解决方案3
0 2018-02-04 07:18:58
您应该这样写：
$(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;
}
});
此伪代码应使您了解如何按列插入数据。
解决方案4
0 2018-02-04 12:53:30
如果仅使用<table>在网格中显示数据，并且不关心支持Internet Explorer，则可以使用CSS grid将大多数逻辑卸载到CSS上。
$('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>
仅使用javascript将数组数据附加到html表中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.