从使用JQuery阵列填充表 [英] Populate table from array using JQuery
问题描述
我有我要填写的表格16个元素的数组。我希望它有2排与8个细胞每排中填充有阵列。我的问题是填充表时，表填充的所有元素融入一行。我没有使用jQuery太多的经验，我想尝试得到这个工作。任何帮助AP preciated！这里是我的code：
// **********的Javascript和放大器; JQuery的**********
VAR阵列= [1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8];
变种数= 0;
变种totalCells = 8;功能writeTable（）{
变量$表= $（'＃summaryOfResults'）; //数组始终包括足够的元素以填充一整行，这是8个细胞。外环决定了多少行进行。
//内环确定元件在细胞中该行打印。
对于（VAR I = 0; I＆LT; array.length / 8;我++）{
。$ table.find（'＃身体'）追加（'＆LT; TR＆GT;'）;
对于（VAR J = 0; J＆LT; totalCells; J ++）{
$ table.append（'＆LT; TD＆GT;'+阵列[统计] +'＆LT; / TD＆GT;'）;
算上++;
}
$ table.append（'＆LT; / TR＆GT;'）;
}
}// ********** ********** HTML
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =resultsTable＆GT;
＆LT;表ID ='summaryOfResults'边界='1'＆GT;
＆LT; TBODY ID =身体＆GT;
＆所述; TR＆GT;
＆LT;第i＃＆LT; /第i
百分位将N＆lt;副I标记＆LT; /子＆GT;＆LT; /第i
百分位将N＆lt;副＆GT; F＆LT; /子＆GT;＆LT; /第i
＆LT;第i E＆lt;副I标记＆LT; /子＆GT; （J）＆LT; /第i
＆LT;第i E＆lt;副＆GT; F＆LT; /子＆GT; （J）＆LT; /第i
百分位＆GT;＆安培;台达，E（J）＆LT; /第i
百分位＆GT;＆安培;三角洲; E（千焦/摩尔）LT; /第i
＆所述;第i＆放大器;拉姆达; （NM）LT; /第i
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; DIV ID =tableButtons＆GT;
＆LT;按钮的ID ='复制按钮的onclick =''＆GT;复制表＆LT; /按钮＆GT;
＆LT;按钮的ID =清除的onclick ='clearTable（）;'＆GT;清表＆LT; /按钮＆GT;
＆LT;按钮的ID =写的onclick ='writeTable（）;'＆GT;写表＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
首先，你必须重新设置计数的每次点击。结果
接下来，你必须指定完全＆LT; TD＆GT; 元素都被追加到。至于现在，你直接附加他们到＆LT;表＆gt; ：
//你的表元素的声明：
变量$表= $（'＃summaryOfResults'）;
// ...
//然后在嵌套循环，你直接追加细胞表：
$ table.append（'＆LT; TD＆GT;'+阵列[统计] +'＆LT; / TD＆GT;'）;
最后一件事 - .append（'＆LT; / TR＆GT;'）不是创建一个元素对象以适当的方式，它应该是'＆LT; TR /＆GT; 或'＆LT; TR＆GT;＆LT; / TR＆GT;'。
这应该是你在找什么：
函数writeTable（）{
//缓存＆LT;＆TBODY GT;元件：
VAR TBODY = $（'＃身体'）;
对于（VAR I = 0; I＆LT; array.length / 8;我++）{
//创建一个＆LT; TR＆GT;元素，将其追加到的＆lt;＆TBODY GT;并缓存它作为一个变量：
VAR TR = $（'＆LT; TR /＆GT;'）。appendTo（TBODY）;
对于（VAR J = 0; J＆LT; totalCells; J ++）{
//将＆LT; TD＆GT;元素pviously创建＆LT $ P $; TR＆GT;元件：
tr.append（'＆LT; TD＆GT;'+阵列[统计] +'＆LT; / TD＆GT;'）;
算上++;
}
}
//复位计数：
计数= 0;
}
另外，做一个HTML字符串，并将其追加到表中的循环之外：
函数writeTable（）{
//声明HTML变量（一个字符串持有人）：
VAR HTML ='';
对于（VAR I = 0; I＆LT; array.length / 8;我++）{
//添加初始＆lt; TR＆GT;标记字符串：
HTML + ='＆LT; TR＆GT;';
对于（VAR J = 0; J＆LT; totalCells; J ++）{
//添加＆LT; TD＆GT;元素添加到字符串：
HTML + ='＆LT; TD＆GT;' +阵列[统计] +'＆LT; / TD＆GT;';
算上++;
}
//添加结束＆lt; / TR＆GT;标记字符串：
HTML + ='＆LT; / TR＆GT;';
}
//追加创建的HTML表体：
$（'＃身体'）追加（HTML）;
//复位计数：
计数= 0;
}
I have an array of 16 elements that I want to fill a table. I want it to have 2 rows with 8 cells in each row which is filled with the array. My problem is that when the table is populated, the table populates all elements into one row. I have not had much experience with JQuery and I want to try to get this to work. Any help is appreciated! Here is my code:
//**********Javascript & JQuery**********
var array = [1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8];
var count = 0;
var totalCells = 8;
function writeTable() {
var $table = $('#summaryOfResults');
//Array always includes enough elements to fill an entire row, which is 8 cells. Outer loop determines how many rows to make.
//Inner loop determines the elements to print in the cells for that row.
for (var i = 0; i < array.length / 8; i++) {
$table.find('#body').append('<tr>');
for (var j = 0; j < totalCells; j++) {
$table.append('<td>' + array[count] + '</td>');
count++;
}
$table.append('</tr>');
}
}
//**********HTML**********
<html>
<head>
</head>
<body>
<div id="resultsTable">
<table id='summaryOfResults' border='1'>
<tbody id="body">
<tr>
<th>#</th>
<th>n<sub>i</sub></th>
<th>n<sub>f</sub></th>
<th>E<sub>i</sub> (J)</th>
<th>E<sub>f</sub> (J)</th>
<th>ΔE (J)</th>
<th>ΔE (kJ/mol)</th>
<th>λ (nm)</th>
</tr>
</tbody>
</table>
</div>
<div id="tableButtons">
<button id='copyButton' onclick=''>Copy Table</button>
<button id='clear' onclick='clearTable();'>Clear Table</button>
<button id='write' onclick='writeTable();'>Write Table</button>
</div>
</body>
</html>
First, you have to reset count on every click.
Next, you have to specify where exactly the <td> elements have to be appended to. As for now, you're appending them directly to the <table> :
// your declaration of the table element:
var $table = $('#summaryOfResults');
// ...
// then in nested loop, you're appending the cells directly to the table:
$table.append('<td>' + array[count] + '</td>');
The last thing - .append('</tr>') is not a proper way to create an element object, it should be '<tr/>' , or '<tr></tr>'.
This should be what you're looking for:
function writeTable() {
// cache <tbody> element:
var tbody = $('#body');
for (var i = 0; i < array.length / 8; i++) {
// create an <tr> element, append it to the <tbody> and cache it as a variable:
var tr = $('<tr/>').appendTo(tbody);
for (var j = 0; j < totalCells; j++) {
// append <td> elements to previously created <tr> element:
tr.append('<td>' + array[count] + '</td>');
count++;
}
}
// reset the count:
count = 0;
}
Alternatively, make a HTML string and append it to the table outside of the loop:
function writeTable() {
// declare html variable (a string holder):
var html = '';
for (var i = 0; i < array.length / 8; i++) {
// add opening <tr> tag to the string:
html += '<tr>';
for (var j = 0; j < totalCells; j++) {
// add <td> elements to the string:
html += '<td>' + array[count] + '</td>';
count++;
}
// add closing </tr> tag to the string:
html += '</tr>';
}
//append created html to the table body:
$('#body').append(html);
// reset the count:
count = 0;
}
这篇关于从使用JQuery阵列填充表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
