使用Javascript创建大型HTML表和重复单元格
我确信这必须在某个地方记录下来，但我对html太陌生了，以至于我不知道该在哪里查找，所以如果有什么明显的问题，请随时指导我正确阅读。请注意，我用几种语言编写代码，但主要是python或LaTeX之类的东西，与html完全不同。我已经在底部列出了我的尝试，但是我尝试在我的设计设置和遇到的问题方面列出了我所能做到的。对于所列问题的任何解决方案，我们将不胜感激：） 设置 我需要形成巨大的信息表，这些信息将根据另一个网页上给出的JSON字符串填充。我目前正在使用javascript解析JSON字符串，并形成一个我自己的全局对象，该对象包含所有相关信息（用户将插入的JSON字符串非常大，我只需要它的一小部分）。创建的对象具有以下形式：使用Javascript创建大型HTML表和重复单元格,javascript,html,html-table,cell,persistent,Javascript,Html,Html Table,Cell,Persistent,我确信这必须在某个地方记录下来，但我对html太陌生了，以至于我不知道该在哪里查找，所以如果有什么明显的问题，请随时指导我正确阅读。请注意，我用几种语言编写代码，但主要是python或LaTeX之类的东西，与html完全不同。我已经在底部列出了我的尝试，但是我尝试在我的设计设置和遇到的问题方面列出了我所能做到的。对于所列问题的任何解决方案，我们将不胜感激：） 设置 我需要形成巨大的信息表，这些信息将根据另一个网页上给出的JSON字符串填充。我目前正在使用javascript解析JSON字符串，并
cruData = {hero:[{"cruID":0,"EP":0,"Owned":"No","GearName1":"Empty","GearRarity1":"Empty","GearName2":"Empty","GearRarity2":"Empty","GearName3":"Empty","GearRarity3":"Empty"}]}
COTLI计算器和Ref
函数加载_数据（）{
var i=0；
/*
布什杀手
空白
空白
空白
空白
空白
空白
空白
空白
*/
对于（i=1；i<!DOCTYPE html>
<html>
<head>
<title>COTLI Calculator and Ref</title>
<!-- <link rel="stylesheet" href="StyleRef.css"> -->
<script>
function Load_Data() {
var i = 0;
/*
<td>The Bush Whacker</td>
<td id="CrEP_1">Blank</td>
<td id="CrGN1_1">Blank</td>
<td id="CrGR1_1">Blank</td>
<td id="CrGN2_1">Blank</td>
<td id="CrGR2_1">Blank</td>
<td id="CrGN3_1">Blank</td>
<td id="CrGR3_1">Blank</td>
<td id="CrUnLock_1">Blank</td>
*/
for (i = 1; i < lootTable.hero.length; i++) {
"crEP_"+i = cruData.hero[i].EP;
};
}
window.onload = Load_Data;
</script>
</head>
<body style="background-color:lightgrey; text-align:center;">
<style>
<!-- Below is the color coding for the rows broken into batches of 4 bench slots at a time. The offset value is because of how the rows are counted and the "header" row. -->
<!-- tr:nth-child(35n+1) {background-color: #4682b4;} -->
<!-- tr:nth-child(21n+1) {background-color: #e36f8a;} -->
tr:nth-child(20n+2) {background-color: #4682b4;}
tr:nth-child(20n+3) {background-color: #4682b4;}
tr:nth-child(20n+4) {background-color: #4682b4;}
tr:nth-child(20n+5) {background-color: #4682b4;}
tr:nth-child(20n+6) {background-color: #4682b4;}
tr:nth-child(20n+7) {background-color: #3abda0;}
tr:nth-child(20n+8) {background-color: #3abda0;}
tr:nth-child(20n+9) {background-color: #3abda0;}
tr:nth-child(20n+10) {background-color: #3abda0;}
tr:nth-child(20n+11) {background-color: #3abda0;}
tr:nth-child(20n+12) {background-color: #e09e87;}
tr:nth-child(20n+13) {background-color: #e09e87;}
tr:nth-child(20n+14) {background-color: #e09e87;}
tr:nth-child(20n+15) {background-color: #e09e87;}
tr:nth-child(20n+16) {background-color: #e09e87;}
tr:nth-child(20n+17) {background-color: #93b881;}
tr:nth-child(20n+18) {background-color: #93b881;}
tr:nth-child(20n+19) {background-color: #93b881;}
tr:nth-child(20n) {background-color: #93b881;}
tr:nth-child(20n+1) {background-color: #93b881;}
table {
border-collapse: collapse;
border: 5px solid black;
tex-align:center;
}
th {
padding: 20px;
border: solid black 3px;
}
td {
padding: 20px;
border: solid black 1px;
}
td.rarity {
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
}
</style>
<h1>
Crusader Table
</h1>
<table align="center">
<tr style="background-color:#e36f8a; text-align:center;">
<th>Crusader Name</th>
<th>EP</th>
<th>Gear 1 Name</th>
<th>Gear 1 Rarity</th>
<th>Gear 2 Name</th>
<th>Gear 2 Rarity</th>
<th>Gear 3 Name</th>
<th>Gear 3 Rarity</th>
<th>Unlocked</th>
</tr>
<!-- Below is the master table for Crusaders. Tags are: CrEP_# for EP, CrGN1_# for Gear 1 name, CrGR1_# for Gear 1 Rarity (similarly gear 2 and 3) and CrUnlock_# for unlock, where # is Crusader ID. -->
<!-- Bench One
The Bush Whacker - 1
RoboRabbit - 38
Graham The Driver - 66
Warwick the Warlock - 75
Slisiblyp, the Alien Scientist - 89
-->
<tr>
<td>The Bush Whacker</td>
<td id="CrEP_1" value=CruData.hero[1].EP> </td>
<td id="CrGN1_1">Blank</td>
<td class="rarity" id="CrGR1_1"></td>
<td id="CrGN2_1">Blank</td>
<td id="CrGR2_1">Blank</td>
<td id="CrGN3_1">Blank</td>
<td id="CrGR3_1">Blank</td>
<td id="CrUnLock_1">Blank</td>
</tr>