使用JavaScript的大型HTML表和重复创建细胞

我敢肯定，这在某个地方记录了，但是我在HTML中是个新手如果这是明显的话，可以随意将我带入正确的阅读。请注意，我用几种语言进行编码，但主要是诸如Python或Latex之类的东西，与HTML一样。我包括了我的底部尝试，但试图将我的设计设置以及遇到的问题包括在内。对任何列出的问题的任何解决方案都将不胜感激：）

设置;

我需要根据另一个网页上给出的JSON字符串来形成巨大的信息表。我目前正在使用JavaScript来解析JSON字符串，并形成我自己的单个全局对象，该对象具有所有相关信息（用户将插入的JSON字符串很大，我只需要相对较小的部分）。创建的对象具有以下表格;

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

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

提议的设置：

我的最初计划是在单独的网页上预先修复（空白）结构，然后在抓住JSON文件并将其解析到Crudata对象之后，将其填充该表格相关信息（现在从技术上ID 1到103，此表中的0个ID）在用户转到该页面时。

问题：

1）我关注的是，在页面加载时形成表的方法是该表非常可观，我真的不想在每个页面加载上都形成表。有没有办法在本地保存此保存，以便它成立一次，然后在缓存中？

2）假设预先格式化表确实是一个好主意（随时告诉我我很愚蠢，所以想到了），我将拥有350个以上的细胞（所有"稀有"单元格）相同的下拉框。因此，我想为单元格制作一个类型，该单元格是一个下拉列表的选择列表，但无法在样式部分中弄清楚如何做到这一点。我可以让特定的TD上班，但不能使用一类TD工作。同样，我敢肯定这是因为我只是不太了解定义类或样式部分的工作原理（我以前从未使用过类传播系统编码）。

是特定的，我希望在此100 行表的每个行的3个不同单元格中有一个下拉框。它们都是相同的下拉选择。为此，形式会更好吗？有没有办法在一堂课中定义一次下拉选择，然后只指向每个单元格中的类，以便我不必重新添加选择选项到每行3个单元格的3个单元格？<<<<

3）我希望每个行的每个稀有细胞和EP单元都由人类编辑，并保存新的值以用于其他地方的计算。我对此的想法是将Crudata对象复制到用于计算的十字架对象，然后将播放器输入覆盖。这样，我可以在表页面上添加一个"重置"按钮，以修复用户re悔之后的所有内容：）

4）我想在表中对与我正在录制数据的游戏中的内容相对应的行块。目前，我需要每5行在标题后以颜色的颜色封锁，但是5行可能会普遍更改为另一个数字。有没有办法为此设置动态变量，以便我可以更改一个数字而不是束？同样，在我的尝试下，它适用于第一个类似50-70行，然后开始具有各种怪异的行为，但是我不知道为什么？ [已解决，找到了问题的Thead Tbody标签]

5）不是一个真正的问题，但是，有没有办法只能创建X行而没有手工创建每个行的方法？唯一的皱纹是下面给出的示例中的ID号将具有所有数字1-103 ，但不能以该顺序为单位。我认为我可以执行某种形式的向量，该向量具有正确的顺序，然后从该向量中拉出连续数字以按顺序进行编号，但是我不知道您是否可以使用for for loop创建行。

感谢您的帮助！

我的尝试：警告，我敢语言。因此，我从一个愚蠢的项目开始学习：）

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

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

您可以将其作为字面HTML的字符串在本地缓存到cookie，但是这个过程确实并不昂贵。如果长度是一个问题 - 也许考虑将其分解为渲染第一个X元素的元素。
为单元格创建一个类。<td class='dropdown-cell'> [your data] </td>，然后在您的CSS中：.dropdown-cell{[your css rules}仅格式化具有类下拉电池的表单元格。编辑：CSS类以相同的方式工作，如果它是<td class="custom-class">或<select class="custom-class">或<option class="custom-class>您放上的任何元素都将继承.custom-class在CSS中指定的样式。

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

如果我正确理解它，如果您希望这些编辑绑定到某些对象。您应该为每一行创建一个类，然后运行一个函数on Change或onclick或onkeyup，或者对这些可编辑事件进行修改，然后修改相关对象。

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/getelements/getelementsbyclassname添加一个类，然后在循环中，为行添加条件格式[i]模量5.
您可以使用for循环创建行，您只需要给JavaScript提供HTML格式化，然后使用附录将其添加到https://www.www.w3schools.com/jsref/jsref/met_node_node_appendchild。ASP

我建议您进行jQuery的操纵，因为它可以使特定的ID，类和元素非常容易。

相关内容

最新更新

热门标签：