Question

还是一个很新的JavaScript。我正在尝试编写一个用表替换有序列表的程序。该表应该有2列3行。第一列有数字（1,2,3），右列有游戏名称。如何让表格替换列表并阅读列表项？

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

HTML

import math

data = """Vancouver-1 35.5
Vancouver-2 34.6
Vancouver-3 37.6"""

lines = data.split('\n')
mapped_data = list()
for line in lines:
    city_month, maxtemp = line.split()
    maxtemp = math.ceil(float(maxtemp))
    mapped_data.append([city_month, maxtemp])

sorted_data = sorted(mapped_data, key=lambda x: x[1])

res = ''
cities_str = ''
for temp in range(10, 51):
    if sorted_data and sorted_data[0][1] < temp:
        cities_str += sorted_data.pop(0)[0]+' '
    res += str(temp)+' '+cities_str+'\n'

print(res)

的JavaScript

<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>

Answer 1

我添加了一个div'id' - 'tryme'，在里面我得到了这个列表因此，当您单击“替换”时，应使用innerHtml清除div，然后构建表。（附上'tryme'div）
的编辑
要让'ol'孩子使用
让elmList = document.getElementById（'list'）。children;
现在你可以像数组一样迭代它，并根据你的喜好使用它的'innerText'/'innerHtml' 在清除'tryme'之前的示例中，我有一个包含列表子项的数组显示在控制台中。

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 个答案: