Question

我想从列表中获取内容并将其转换为表格，插入一些我要编写的内容并对齐表格

我可以轻松对齐并且已经有了列表，但是我无法将其转换为表格

这是列表

<ul>
<li>Success</li>
<li>SuccessWithRemarks</li>
<li>InvalidInputData</li>
<li>UnavailableData</li>
<li>EntityNotFound</li>
<li>InvalidParameters</li>
<li>ParametersNotSupported</li>
<li>RemoteSystemUnavailable</li>
<li>Timeout</li>
<li>AttemptsLimitReached</li>
<li>RemoteSystemError</li>
<li>AsyncExecutionInProgress</li>
<li>InsufficientBalance</li>
<li>SimultaneousTransactionsLimitReached</li>
<li>TransactionUnavailable</li>
<li>AccessDenied</li>
<li>TransactionCancelled</li>
<li>InternalError</li>
</ul>

只需将其变成具有更多2或3行的表

Answer 1

实现一个带有li标签并将其转换为表格的函数

function turnIntoTable(input, rowCount) {
    var output = "<table><tbody>";
    var rows = [];
    for (var i = 0; i < rowCount; i++) rows.push([]);
    var index = 0;
    for (var item of input) {
        rows[index % rowCount].push("<td>" + item.innerText + "</td>");
        index = (index + 1) % rowCount;
    }
    for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
        if ((rowIndex > 0) && (rows[rowIndex].length < rows[rowIndex - 1].length)) rows[rowIndex].push("<td></td>");
        output += "<tr>" + rows[rowIndex].join("") + "</tr>";
    }
    output += "</tbody></table>";
    return output;
}

并调用它：

targetTag.innerHTML = turnIntoTable(document.querySelectorAll("li"), 3);

Answer 2

您的数据将放在td标签之间。

<table>
    <tr>
       <td></td>
       <td></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
    </tr>
</table>

Answer 3

此javascript应在JavaScript中创建表对象。

const lis = document.getElementsByTagName("ul")[0].children
const table = document.getElementsByTagName("table")[0]

for(let i = 0; i < lis.length; i = i + 2){
    const td = document.createElement("td")
    td.innerHTML = lis[i].textContent

    const td2 = document.createElement("td")
    td2.innerHTML = lis[i + 1].textContent

    //add a third td for a third column

    const tr = document.createElement("tr")

    tr.appendChild(td)
    tr.appendChild(td2)

    table.appendChild(tr)
}

注意：只有在HTML中有<table></table>时，此方法才有效

使用页面和更多内容插入表格

3 个答案: