HTML，如何使用jQuery以列方式向表中添加数据？
[英]HTML, How to add data to a table in column-wise using jQuery?
问题描述
I have an empty HTML table. 
我有一个空的HTML表。 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? 填充第一列后，应转到下一列并进行相应填充。如何使用j Query完成此操作？ I shall provide my html code below: 我将在下面提供我的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>
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 个解决方案
解决方案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>
This code will help you. 此代码将为您提供帮助。
解决方案2
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. 保留最大行的计数，并对其进行迭代，直到到达该列的最后一行为止，然后将tdCounter递增1 ，并将rowCounter重置为0以从顶部重新开始。
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. 希望对您有所帮助。
解决方案3
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. 此伪代码应使您了解如何按列插入数据。
解决方案4
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 . 如果仅使用<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.