如何使用javascript向表格添加复选框[关闭]答案

【问题标题】：How to add checkbox to the table using javascript [closed]如何使用javascript向表格添加复选框[关闭]
【发布时间】：2020-12-07 09:30:04
【问题描述】：

我在页面中创建了一个带有 javascript 函数的 html 表。我需要在表格中每一行的最后一列中创建一个复选框。我还希望复选框的值应该与 a 中的元素的值相同（以供进一步使用）。我不知道该怎么做。任何人都可以帮助我吗？请给我一个例子。

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

//script.js
window.addEventListener("load", function(){
  var a = ["a1", "a2", "a3"];

  var b = ["b1", "b2", "b3"];

  var c = ["c1", "c2", "c3"];

  html = "<table><tr>";

  for (var i=0; i<a.length; i++) {
    j = i+1;
    html += "<td>" + j + "</td>" + "<td>" + a[i] + "</td>" + "<td>" + b[i] + "</td>" + "<td>" + c[i] + "</td>";
    html += "<td value="a[i]"> <input type="checkbox"> </td>";
    html += "</tr><tr>";
  }
  html += "</tr></table>";
  document.getElementById("container").innerHTML = html;
});

HTML 代码是：-

<!DOCTYPE html>

 <html>
        <head>
                <title>A</title>

                <link rel="stylesheet" href="normalize.css">
                <link rel="stylesheet" href="style.css">

                <!-- jQUERY UI CSS -->
                <link href="js/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet">
        </head>
        <body>
            <div id="container"></div>
            <!-- Load the CDN first -->
            <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous" >
            </script>

            <!-- If CDN fails to load, serve up the local version -->
            <script>window.jQuery || document.write('<script src="js/jquery.js" ><\/script>');
            </script>

            <!-- jQUERY UI -->
            <script src="js/jquery-ui-1.12.1/jquery-ui.min.js" ></script>

            <script src="script.js" ></script>
        </body>
</html>

【问题讨论】：

"<td value="a[i]"> <input type="checkbox"> </td>" 完全错误。
你的语法有很多问题...jsfiddle.net/12b5savk
太多奇怪的jQuery加载

标签： javascript html jquery arrays html-table

【解决方案1】：

试试模板文字 - 你在这一行有引用问题和 var 问题

html += "<td value="a[i]"> <input type="checkbox"> </td>";

还有你的<tr> and too many 太少了`

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 value="${a[i]}"><input type="checkbox"></td></tr>`)
  }
  html.push("</tbody></table>");
  document.getElementById("container").innerHTML = html.join("");
});

&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：

你能帮我回答这个问题吗，谢谢你的回答：-link @mplungjan

【解决方案2】：

您需要使用\ 转义双引号，例如\"。

window.addEventListener("load", function() {
  var a = ["a1", "a2", "a3"];

  var b = ["b1", "b2", "b3"];

  var c = ["c1", "c2", "c3"];

  html = "<table><tr>";

  for (var i = 0; i < a.length; i++) {
    j = i + 1;
    html += "<td>" + j + "</td>" + "<td>" + a[i] + "</td>" + "<td>" + b[i] + "</td>" + "<td>" + c[i] + "</td>";
    html += "<td value=\"" + a[i] + "\"> <input type=\"checkbox\"> </td>";
    html += "</tr><tr>";
  }
  html += "</tr></table>";
  document.getElementById("container").innerHTML = html;
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid;
}

&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：