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

Posted 2023-05-09

技术标签:

【中文标题】如何使用javascript向表格添加复选框[关闭]【英文标题】：How to add checkbox to the table using javascript [closed] 【发布时间】：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加载 【参考方案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;

【讨论】：

以上是关于如何使用javascript向表格添加复选框[关闭]的主要内容，如果未能解决你的问题，请参考以下文章

我想使用 html 在表格的每一行旁边添加一个复选框 [关闭]

使用 JavaScript 在表格上创建复选框

高级表单验证 - 如何在用户完成后在字段旁边添加复选标记？ --Javascript [关闭]

如何在 PHP 发出的表格行中使用 JavaScript 检查所有复选框

将javascript创建的复选框传递给控制器以保存到表格？

如何在QTableWidget表头添加复选框