Question

我确定要在某处记录，但我在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"}]}

随着cruID从0迭代到103（计划在某个时刻使其至少高出几百）。所有字符串都将填充字符串，EP / ID为真数。

建议设置：

我最初的计划是在单独的网页上预先制作（空白）表结构，然后在抓取JSON文件并将其解析为cruData对象后，用该表填充该表当用户进入页面加载时，相关信息（技术上现在为ID 1到103，此表中没有0 ID）。

问题：

1）我对这种在页面加载时形成表格的方法的关注是表格相当大，而且我确实不会在每次页面加载时形成表格。有没有办法在本地保存它，以便它形成一次然后它在缓存中？

2）假设预先格式化表格确实是一个好主意（随意告诉我因为这么愚蠢而感到愚蠢），我会有350多个单元格（所有＆＃39;稀有＆＃ 39; cell）都是相同的下拉框。因此，我想为下拉选择列表中的单元格创建类类型，但无法在样式部分中弄清楚如何执行此操作。我可以得到一个特定的工作，但不是一类工作的TD。再一次，我确定这是因为我真的不明白定义类或样式部分是如何工作的（我以前没有使用过类继承系统编码）。

具体到，我希望在这个100+行表的每一行的3个不同单元格中都有一个下拉框。它们都是相同的下拉选项。要做到这一点，表格会更好吗？有没有办法在类中定义一次下拉选择，然后只指向每个单元格中的类，这样我就不必将选择选项重新添加到每一行的3个单元格中？

3）我希望人类可以编辑每行的每个稀有单元格和EP单元格，并保存新值以便在其他地方进行计算。我的想法是将cruData对象复制到用于计算的cruComp对象，然后让它被播放器输入覆盖;这样我就可以添加＆＃34;重置＆＃34;在用户悔恨之后，桌面上的按钮可以修复所有内容：）

4）我想在表格中对与我记录数据的游戏内容相对应的行块进行着色。现在我需要在标题之后用颜色一起阻挡每5行，但是5可以普遍地改变为另一个数字。有没有办法为此设置动态变量，以便我可以更改一个数字而不是一堆？同样在我的尝试中，它适用于第一个像50-70行，然后开始有各种奇怪的行为，但我无法弄清楚为什么？ [解决了，找到了问题的主题标签]

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元素。
为单元格创建一个类。 <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。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>");
  }
  
  
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

我建议您使用Jquery进行DOM操作，因为它可以很容易地深入到特定的ID，类和元素。

大型HTML表格和使用Javascript

1 个答案: