显示 table - 等效的 vanilla JS

Question

示例table内容：

书架 1：项目 12
书架 2：项目 11
书架 3：项目 10
货架 4：项目 09
书架 5：项目 08
书架 6：项目 07
书架 7：项目 06
货架 8：项目 05
货架 9：项目 04
书架 10：项目 03
书架 11：项目 02
书架 12：项目 01

通过调用以下函数显示货架和项目配对：

displayShelfItemPair(shelfName, itemName);

代码

const displayShelfItemPair = (shelfName, itemName) => {

 return shelfName.map((shelf, item) => {
  return (
    <table>
    <tr>
      <td>{shelf.shelfName}</td>
      <td>{item.itemName}</td>
    </tr>
    </table>
  )
 })
}

什么 would/could 相当于 JS？我想在 table.

中显示它们

Answer 1

这就是您可以从普通 JS 函数输出 <table> 的方法。

function displayShelfItemPair(shelfName, itemName){
    var table = '<table>';
    for(var i = 0; i < shelfName.length; i++)
        table += '<tr><td>' + shelfName[i] + '</td><td>' + itemName[i] + '</td></tr>';
    table += '</table>';
    return table;
}

你可以把这个 table 放在 div 中（在这种情况下是 id = "result"），比如

document.getElementById('result').innerHTML = displayShelfItemPair(shelfName, itemName);

<div id="result"></div>

显示 table - 等效的 vanilla JS

Displaying table - vanilla JS equivalent

javascript

key-value