如何使用表中的检查值使用javascript制作另一个表答案

【问题标题】：How to use checked values in table to make another table using javascript如何使用表中的检查值使用javascript制作另一个表
【发布时间】：2020-08-19 04:22:08
【问题描述】：

我在页面中创建了一个带有 javascript 函数的 html 表。我需要在 table1 的每一行的最后一列中的每一列中创建一个复选框，如果选中该复选框，则 table1 的元素将被添加到 table2 而不使用复选框。我不知道该怎么做。任何人都可以帮助我吗？请给我一个例子。

我使用的代码是这样的：-

const a = ["a1", "a2", "a3"];
const b = ["b1", "b2", "b3"];
const c = ["c1", "c2", "c3"];
let html = [];
window.addEventListener("load", function() {
  html.push("<table><tbody>");
  for (var i = 0; i < a.length; i++) {
    j = i + 1;
    html.push(`<tr><td>${j}</td><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td>`);
    html.push(`<td><input type="checkbox"  value="${i}" name="code"></td></tr>`)
  }
  html.push("</tbody></table>");
  document.getElementById("container").innerHTML = html.join("");
});

$(document).ready(function() {
  var y = 0;
  $("input[type='checkbox']").onclick(function() {
    var code1 = $("input[name='code']:checked").val();
    for (var x = 0; x < code1.length; x++) {
      if ($(this).prop("checked") == true) {
        window.addEventListener("load", function() {
          html1.push("<table><tr>");
          y = y + 1;
          html1.push(`<tr><th>${y}</th><td>${a[x]}</td><td>${b[x]}</td><td>${c[x]}</td></tr>`);
          html.push("</table>");
        });
      });
  });
  document.getElementById("result").innerHTML = html1.join("");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
<div id="result"></div>

【问题讨论】：

应该在单击复选框时创建表？或所有复选框？此外，您的代码中有一些错字name.length 应该是code1.length。这里html.push("</table>"); 应该是html1.push..，还有更多请更正并更新您的问题。
我给你做了一个minimal reproducible examplesn-p。它给出了错误
我可以给你发送谷歌驱动器链接，因为有很多文件@mplungjan

标签： javascript html jquery css html-table

【解决方案1】：

这更接近你想要的

我确实建议您不要只是将一些猜测的代码放在一起 - 您发布的代码是一堆事件处理程序、DOM 处理和 jQuery

const a = ["a1", "a2", "a3"];
const b = ["b1", "b2", "b3"];
const c = ["c1", "c2", "c3"];
let html = [];
let html1 = [];
$(function() {
  html.push("<table><tbody>");
  for (var i = 0; i < a.length; i++) {
    j = i + 1;
    html.push(`<tr><td>${j}</td><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td>`);
    html.push(`<td><input type="checkbox" value="${i}" name="code"></td></tr>`)
  }
  html.push("</tbody></table>");
  document.getElementById("container").innerHTML = html.join("");

  $("input[type='checkbox']").on("click", function() {
    if (this.checked) {
      let y = 0;
      const code1 = this.value
      for (var i = 0; i < code1; i++) {
        html1.push("<table><tbody>");
        y = y + 1;
        html1.push(`<tr><th>${y}</th><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td></tr>`);
        html1.push("</tbody></table>");
      }
    }
    document.getElementById("result").innerHTML = html1.join("");
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
<div id="result"></div>

【讨论】：

【解决方案2】：

const a = ["a1", "a2", "a3"];
const b = ["b1", "b2", "b3"];
const c = ["c1", "c2", "c3"];
let html = [];
let html1 = [];
$(function() {
  html.push("<table><tbody>");
  for (var i = 0; i < a.length; i++) {
    j = i + 1;
    html.push(`<tr><td>${j}</td><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td>`);
    html.push(`<td><input type="checkbox" value="${i}" name="code"></td></tr>`)
  }
  html.push("</tbody></table>");
  document.getElementById("container").innerHTML = html.join("");
  var y = 0;
  $("input[type='checkbox']").on("click", function() {
    if (this.checked == true) {
      const i = this.value
        html1.push("<table><tbody>");
        y = y + 1;
        html1.push(`<tr><th>${y}</th><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td></tr>`);
        html1.push("</tbody></table>");
    }

    if (this.checked == false) {
      const i = this.value
        html1.pop("<table><tbody>");
        y = y - 1;
        html1.pop(`<tr><th>${y}</th><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td></tr>`);
        html1.pop("</tbody></table>");
    }
    document.getElementById("result").innerHTML = html1.join("");
  });

});`enter code here`

【讨论】：