大 HTML table 并使用 Javascript 重复创建单元格

Question

我确定这个已经记录在某个地方，但我在 html 太新了，所以我不知道去哪里找，所以如果很明显，请随时指导我正确阅读。请注意，我使用多种语言编写代码，但主要是 python 或 LaTeX，而不是 html。我在底部包含了我的尝试，但我试图在我的设计设置和我遇到的问题运行方面包含我能做的。任何列出的问题的任何解决方案将不胜感激:)

设置；

我需要形成巨大的 table 信息，这些信息将根据另一个网页上给出的 JSON 字符串进行填充。我目前正在使用 javascript 来解析 JSON 字符串并形成我自己的一个全局 object，其中包含所有相关信息（用户将插入的 JSON 字符串in 很大，我只需要其中的一小部分）。创建的 object 具有以下形式；

  cruData = {hero:[{"cruID":0,"EP":0,"Owned":"No","GearName1":"Empty","GearRarity1":"Empty","GearName2":"Empty","GearRarity2":"Empty","GearName3":"Empty","GearRarity3":"Empty"}]}

随着 cruID 从 0 迭代到 103（计划在某个时候至少提高几百）。所有的字符串都会用字符串填充，EP/ID是真实的数字。

建议设置：

我原来的计划是pre-make(空白)table结构在单独的网页上，然后在抓取JSON 文件并将其解析到 cruData object 中，以在 page-load 当用户访问它时。

问题：

1) 我对这种在页面加载时形成 table 的方法的担忧是 table 相当大，我真的不想让 table 形成于每个页面加载。有没有办法在本地保存它，以便它形成一次然后在缓存中？

2) 假设 pre-formatting table 真的是个好主意（尽管告诉我我这么想是愚蠢的嘿嘿），我将有大约 350+ 个细胞（所有'rarity' 个单元格）都是相同的下拉框。因此，我想为 drop-down 选择列表的单元格创建一个 class 类型，但无法在样式部分弄清楚如何做到这一点。我可以让特定的 td 工作，但不能让 class 的 td 工作。同样，我确定这是因为我真的不明白定义 classes 或样式部分是如何工作的（我以前没有使用过 class-inheritance 系统编码）。

具体，我希望在这 100 多行 table 的每一行的 3 个不同单元格中有一个 drop-down 框。它们都是相同的 drop-down 选择。为此，表格会更好吗？有没有一种方法可以在 class 中定义一次 drop-down 选择，然后只需指向每个单元格中的 class，这样我就不必 re-add每行 3 个单元格的选择选项？

3) 我希望每一行的每个稀有单元格和 EP 单元格都由人编辑 table，并将新值保存以用于其他地方的计算。我的想法是将 cruData object 复制到用于计算的 cruComp object，然后让玩家输入覆盖它；这样我就可以在 table 页面上添加一个 "reset" 按钮，以在用户后悔开始后修复所有内容:)

4) 我想为 table 中的行块着色，这些行块对应于我正在为其记录数据的游戏中的某些内容。现在我需要每 5 行在标题后用一种颜色被挡住，但是这 5 行可能会普遍更改为另一个数字。有没有办法为此设置一个动态变量，以便我可以更改一个数字而不是一堆？同样在我下面的尝试中，它适用于第一个 50-70 行，然后开始出现各种奇怪的行为，但我不明白为什么？ [已解决，找到问题所在的 thead tbody 标签]

5) 这不是真正的问题，但是，有没有一种方法可以只创建 x 行，而无需手动创建每一行？唯一的问题是下面给出的示例中的 ID 号将包含所有数字 1-103+，但顺序不同。我想我可以做一些具有正确顺序的数字的向量，然后从该向量中提取连续的数字以便按顺序对它们进行编号，但我不知道您是否可以使用 FOR 循环创建行。

感谢您的帮助！

我的尝试： 警告，我相信这会让任何知道自己在做什么的人死在里面，因为我一直说我真的不知道我在做什么用这种语言做。因此，我从一个愚蠢的项目开始，边做边学:)

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

Answer 1

不为你做 - 这是我解决这些问题的角度

您可以将它作为文本 HTML 的字符串在本地缓存到 cookie 中，但这个过程确实并不那么昂贵。如果长度是一个问题 - 也许考虑将其分解为呈现第一个 X 数量的元素。
为单元格创建一个 class。 <td class='dropdown-cell'> [your data] </td> 然后在您的 css 中：.dropdown-cell{[your css rules} 将仅格式化具有 class 下拉单元格的 table 单元格。编辑：CSS classes 的工作方式与 <td class="custom-class"> 或 <select class="custom-class"> 或 <option class="custom-class> 相同由 CSS.

.custom-class

.dropdown{
  height: 50px;
  width: 200px;
  background-color: gray;
}

.dropdown-option{
  background-color: lightgray;
}

<select class="dropdown">
  <option class="dropdown-option">A</option>
  <option class="dropdown-option">B</option>
  <option class="dropdown-option">C</option>
</select>

如果我没理解错的话，如果您希望将这些编辑绑定到某个对象。你应该为每一行创建一个class，然后运行这些editable事件的函数onChange或onClick或onKeyup并修改相关的Object。

class SomeObject{
  constructor(id, name, someVal){
    this.id = id;
    this.name = name; 
    this.someVal = someVal;
  }
}

var numberOfObjects = 5;
var yourObjectsArray = [];

//Create i number of objects and add them to an array of your row objects
//This would be done by looping through your JSON
for(var i = 0; i < numberOfObjects; i++){
  yourObjectsArray.push(new SomeObject(i, "Object " + i, "Some Value")); 
}



//Build your table
for(var i = 0; i < yourObjectsArray.length; i++){
  //The syntax below is Jquery - I suggest using it for event bindings and DOM manipulation
  $('#output-table').append('<tr><td class="id">'+ yourObjectsArray[i].id +'</td><td>'+ yourObjectsArray[i].name +'</td><td class="change-val">'+ yourObjectsArray[i].someVal +'</td></tr>');
}

//Bind an event to a click or any jquery event handler
$(document).on('click', '.change-val', function(){
  //Get the ID of the row that you clicked
  var id = $(this).closest('tr').find('.id').text(); //use value or something else
  
  //Modify the text in the table
  var newVal = "New Value";
  $(this).text(newVal);
  
  //Parse the array of objects to find the one you need to modify
  for(var i = 0; i < yourObjectsArray.length; i++){
    if(yourObjectsArray[i].id == id){
      yourObjectsArray[i].someVal = newVal;
    }
  }
  
  //Prove that your object value changed not just the text
  $('#output').html("<br>");//clear the output
  for(var i = 0; i < yourObjectsArray.length; i++){
    $('#output').append('ID: ' + yourObjectsArray[i].id + " Value: " + yourObjectsArray[i].someVal + "<br>");
  }
  
  
});

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Click on a value cell below to change it
<table id="output-table">
<thead>
  <tr>
    <td>ID</td>
    <td>Name</td>
    <td>Value</td>
  </tr>
</thead>
</table>

<div id="output"></div>

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName 向每一行添加一个 class 然后在 for 循环中，为 row[i] 模数 5 添加条件格式。
您可以使用 for 循环创建行，您只需为 Javascript 提供 HTML 格式，然后使用追加将其添加到末尾 https://www.w3schools.com/jsref/met_node_appendchild.asp

我建议 Jquery 用于您的 DOM 操作，因为它可以很容易地向下钻取特定 ID、classes 和元素。

大 HTML table 并使用 Javascript 重复创建单元格

Large HTML table and repeated cell creation using Javascript

html

javascript

html-table

cell

persistent