将有序列表变成表格

Question

Still pretty new at JavaScript. 在JavaScript上还是很新的。 I'm trying to write a program where you replace an ordered list with a table. 我正在尝试编写一个程序，在其中用表替换有序列表。 The table should have 2 columns and 3 rows. 该表应具有2列和3行。 The first column has the numbers(1,2,3) and the right column has the names of the games. 第一列具有数字（1,2,3），右列具有游戏名称。 How do I get the table to replace the list and read the list items? 如何获取替换列表的表并阅读列表项？

Here is the JSFiddle: http://jsfiddle.net/gmpc0acd/74/ 这是JSFiddle： http : //jsfiddle.net/gmpc0acd/74/

HTML 的HTML

<html>
<head>
<style>
table,td
{
  border:1px solid black;
}
</style>
</head>
<body>

<p>Top Games</p>
<ol id="list">
<li id="element1">Halo</li>
<li id="element2">Portal</li>
</ol> 

<button onclick="addNewGame(); this.disabled=true">Insert</button>
<button onclick="tableCreate()">Replace</button>

JavaScript 的JavaScript

function addNewGame() {
  let ol = document.getElementById("list");
  let li = document.createElement("li");
  li.appendChild(document.createTextNode("Rocket League"));
  ol.appendChild(li);
  list.insertBefore(li,list.childNodes[2]);
}

function tableCreate()
{
 var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");
    document.body.appendChild(x);

    var y = document.createElement("TR");
    y.setAttribute("id", "myTr");
    document.getElementById("myTable").appendChild(y);

    var z = document.createElement("TD");
    var t = document.createTextNode("want game names in here");
    z.appendChild(t);
    document.getElementById("myTr").appendChild(z);
}

Answer 1

I have added a div 'id' - 'tryme' and inside i got the list. 我添加了一个div'id'-'tryme'并且在列表中。
so when you click 'replace' it should clear the div using innerHtml and then build the table. 因此，当您单击“替换”时，应使用innerHtml清除div，然后构建表。 ( appending the 'tryme' div ) （附加“ tryme” div）
edited 已编辑
To get 'ol' children use 为了让孩子们使用
let elmList = document.getElementById('list').children; 让elmList = document.getElementById（'list'）。children;
now you can iterate it like an array and use its 'innerText'/'innerHtml' as you like. 现在，您可以像数组一样对其进行迭代，并根据需要使用其'innerText'/'innerHtml'。
In my example before clearing 'tryme' i have an array with the lists children. 在清除“ tryme”之前的示例中，我有一个包含子项列表的数组。
as displayed in the console. 如控制台中所示。

 let trymeDiv = document.getElementById("tryme");
    trymeDiv.innerHTML = "";

    var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");
    document.getElementById('tryme').appendChild(x)

  <p>Top Games</p>
<div id="tryme">
    <ol id="list">
        <li id="element1">Halo</li>
        <li id="element2">Portal</li>
    </ol>
</div>

 <html> <head> <style> table, td { border: 1px solid black; } </style> </head> <body> <p>Top Games</p> <div id="tryme"> <ol id="list"> <li id="element1">Halo</li> <li id="element2">Portal</li> </ol> </div> <button onclick="addNewGame(); this.disabled=true">Insert</button> <button onclick="tableCreate()">Replace</button> </body> </html> <script> function addNewGame() { let ol = document.getElementById("list"); let li = document.createElement("li"); li.appendChild(document.createTextNode("Rocket League")); ol.appendChild(li); list.insertBefore(li, list.childNodes[2]); } function tableCreate() { let elmList = document.getElementById('list').children; arrayOfGames = []; for ( var i = 0; i < elmList.length; i++){ arrayOfGames.push(elmList[i].innerText); } console.log(arrayOfGames); let trymeDiv = document.getElementById("tryme"); trymeDiv.innerHTML = ""; var x = document.createElement("TABLE"); x.setAttribute("id", "myTable"); document.getElementById('tryme').appendChild(x); var y = document.createElement("TR"); y.setAttribute("id", "myTr"); document.getElementById("myTable").appendChild(y); var z = document.createElement("TD"); var t = document.createTextNode("want game names in here"); z.appendChild(t); document.getElementById("myTr").appendChild(z); } </script>

将有序列表变成表格

问题描述

1 个解决方案

解决方案1
0 2018-03-28 00:15:36

将有序列表变成表格

问题描述

1 个解决方案

解决方案1 0 2018-03-28 00:15:36

解决方案1
0 2018-03-28 00:15:36