Question

让我们从定义我拥有的东西开始吧。我有一个远程JSON API，我调用它来获取一些数据。然后，我在数据上运行一些简单的函数，最后得到一行数据。这行数据分为三个变量。日期，名称和消息（想象一下IRC聊天室）。我希望在data table中显示此数据，以便可以搜索，但是我在向数据表添加行时遇到问题。目前，我的HTML看起来与此类似：

<table id="table" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Date</th>
                <th>Name</th>
                <th>Message</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Date</th>
                <th>Name</th>
                <th>Message</th>
            </tr>
        </tfoot>
    </table>

和我的JS看起来像：

    var text = document.getElementById('text'); //Text Div
    var nameguest = data.items[i].from; //Guests
    var nameuser = data.items[i].from.name; //Users
    var message = data.items[i].message; //Messages
    changeDate(data.items[i].date); //Date
    var table = document.getElementById("table"); //Table Div

    var row = table.insertRow(i);
    row.insertCell(0).innerHTML = datehuman;
    if (typeof nameguest == "object") {
        row.insertCell(1).innerHTML = nameuser;
    } else {
        row.insertCell(1).innerHTML = nameguest;
    }
    row.insertCell(2).innerHTML = message;
}
}

对于数据表，insertCell(0).innerHTML是否有类似的代码？

Answer 1

添加额外的＆＃34; tbody＆＃34;在你的表格中添加标签。您可以使用以下函数在表中插入条目。

function insertEntry (tableId, date, name, message) {

    var table = document.getElementById(tableId),
    tbody = table.getElementsByTagName("tbody")[0],
    tr = document.createElement("tr"),
    newDateEntry = document.createElement("td"),
    newNameEntry = document.createElement("td"),
    newMessageEntry = document.createElement("td");

    newDateEntry.innerHTML = date;
    newNameEntry.innerHTML = name;
    newMessageEntry.innerHTML = message;

    tr.appendChild(newDateEntry);
    tr.appendChild(newNameEntry);
    tr.appendChild(newMessageEntry);

    tbody.appendChild(tr);
}

您的HTML可能如下所示：

<table id="table" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>Message</th>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>Message</th>
        </tr>
    </tfoot>
</table>

您对该函数的示例调用如下所示：

insertEntry("table", "1/1/15", "Ayanonly1", "Hellow World");

Answer 2

我在你提供的html中添加了一个tbody标签，如下所示

<table id="table" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>Message</th>
        </tr>
    </thead>
<tbody></tbody>
    <tfoot>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>Message</th>
        </tr>
    </tfoot>
</table>

并且要将数据添加到表中，您可以在jquery中使用追加

var nameuser = data.items[i].from.name; //Users    
var message = data.items[i].message; //Messages
var newRowContent="<td>"+nameuser+"</td><td>"+message+"</td>  
       <td>"+changeDate(data.items[i].date)+"</td>"

$("#tblEntAttributes tbody").append(newRowContent);

从上面的代码中，我将值存储在变量中并将其附加到表tbody

有关追加please click here的更多信息。我希望我的回答很有帮助。

如何将数据添加到数据表中

2 个答案: