使用JQuery从数组填充表

Question

I have an array of 16 elements that I want to fill a table. 我有16个要填充表格的元素的数组。 I want it to have 2 rows with 8 cells in each row which is filled with the array. 我希望它有2行，每行有8个单元格，并用数组填充。 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. 我在JQuery方面没有太多经验，我想尝试使其工作。 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>&Delta;E (J)</th>
                <th>&Delta;E (kJ/mol)</th>
                <th>&lambda; (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>

Answer 1

First, you have to reset count on every click. 首先，您必须重置每次点击的count 。
Next, you have to specify where exactly the <td> elements have to be appended to. 接下来，您必须指定<td>元素的确切附加位置。 As for now, you're appending them directly to the <table> : 到目前为止，您将它们直接附加到<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>' . 最后一件事.append('</tr>')不是创建元素对象的正确方法，它应该是'<tr/>'或'<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;
}

JSFiddle JSFiddle

Alternatively, make a HTML string and append it to the table outside of the loop: 或者，制作一个HTML字符串并将其附加到循环外部的表中：

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;
}

JSFiddle JSFiddle

使用JQuery从数组填充表

问题描述

1 个解决方案

解决方案1
6 已采纳 2015-03-28 21:35:36

使用JQuery从数组填充表

问题描述

1 个解决方案

解决方案1 6 已采纳 2015-03-28 21:35:36

解决方案1
6 已采纳 2015-03-28 21:35:36