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

How to add data into data tables

本文关键字：数据表 添加 数据      更新时间：2023-09-26

让我们从定义我所拥有的开始。 我有一个远程 JSON API，我调用它以获取一些数据。 然后，我对数据运行一些简单的函数，最终得到一行数据。 此行数据分为三个变量。 日期，名称和消息（想象一个IRC聊天室）。我希望在数据表中显示此数据，以便可搜索，但是，我在向数据表添加行时遇到问题。目前，我的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数据表？

在表格的 html 中添加一个额外的"tbody"标签。您可以使用以下函数在表中插入条目。

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");

我在您提供的 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中使用append。

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 中

有关追加的更多信息，请单击此处。我希望我的回答对您有所帮助。

相关文章：