将 <td> 保存为变量

Question

您好，我目前有一个脚本，您可以在其中将项目名称输入到输入中。以及它的尺寸、颜色和其他选项。这一切都保存为具有自定义规格的单个项目，如下所示： 例如黑色 T 恤、大号、任何尺寸等。

我在表格底部有 3 个按钮，其中一个是输入，您可以在其中命名表格数据，然后按添加按钮并将此信息添加为变量，可以在另一个 html 文件中使用它来调用它。另一个是加载选择，您可以在其中加载和编辑它，类似于此 GitHub 文件在加载其计费信息时所具有的内容 (https://github.com/hunterbdm/Deadass-Splash)

我还想不仅将整个内容保存为一个变量，而且还想以某种方式单独保存每一行，以便我以后可以在脚本的后端调用它，我的程序现在知道要搭配什么衬衫以及尺寸和颜色。

那么我将如何编写 javascript(jQuery，它可以单独保存每一行，以便稍后在后端调用它，可能类似于 (variableName).line1 = t-shirt black Large。

这是我的表格的 html：

<div id="taskContainer">
  <table id="items-table">
    <!--<caption>Task</caption>-->
    <tr>
      <th>Item</th>
      <th>Size</th>
      <th colspan="3">Options</th>
    </tr>
    <tr>
      <td> </td>
    </tr>
  </table>
</div>
<label for="loadTask">Load Task:</label>
<label for="taskName">Task Name:</label>
<select id="loadTask"></select>
<input type="text" id="taskName"></input>
<button type="submit" id="addTask">Add</button>

我该怎么做呢？我是否需要标记每个以便我可以调用 [2] [2] 来调用具有特殊自定义的每一行？由于我是 Js 新手，并且对 python 更有经验，所以我的思维方式非常 Python 化。

这是一张我的桌子的照片：

我会使用像 ipcRenderer 这样的东西吗？

这也是我的 JS 我将如何添加某种计数器以便我可以设置具有该数字的行数：

function addRow() {
    var item_text = $('#item-input').val();
    var item_color = $('#color-input').val();
    var size_text = $('#sizes-item').val();
    var any_color = $('#any-color').is(':checked') ? 'Any Color' : '';
    var any_size = $('#any-size').is(':checked') ? 'Any Size' : '';
    $('#items-table').append('<tr>'
        +'<td>'+item_text+' '+item_color+'</td>'
        +'<td>'+size_text+'</td>'
        +'<td>'+any_color+' '+any_size+'</td>'
        +'<td><button class="remove-btn"><div class="thex">X</div></button><td>'
        +'</tr>');
} 

..

$(function(){
  $('#add-item').click(function(){
    addRow();
    return false;
  });
  $('body').on('click', '.remove-btn', function(){
    $(this).parent().parent().remove();
  });
});

Answer 1

我试图用循环巧妙地做到这一点，但惨遭失败。无论如何，只要表格中的行数不变，这将正常工作。

var table, cell1, cell2, cell3, cell4, cell5, cell6, cell7, cell8, cell9;
table = document.getElementById("items-table");

cell1 = table.rows[0].cells[0].innerHTML;
cell2 = table.rows[0].cells[1].innerHTML;
cell3 = table.rows[0].cells[2].innerHTML; // first row.

cell4 = table.rows[1].cells[0].innerHTML;
cell5 = table.rows[1].cells[1].innerHTML;
cell6 = table.rows[1].cells[2].innerHTML; // second row.

cell7 = table.rows[2].cells[0].innerHTML;
cell8 = table.rows[2].cells[1].innerHTML;
cell9 = table.rows[2].cells[2].innerHTML; // third row.

如果您想保存它并稍后在另一个文件（或同一个文件）中使用它，您可以通过 localStorage 轻松完成。

localStorage.setItem("cell1", cell1); // where "cell1" is the name you want to save it as and cell1 is the variable.

稍后从另一个文件中调用它：

cell1 = localStorage.getItem("cell1");