[编辑] 感谢 prasad 和 Vijayp 的帮助，我解决了设置边界的问题。但是，另一个问题没有完全解决。我为没有说清楚而道歉。 我的问题是在动态创建表之后。你可以看到有 5 个水平边框。(请参见下图)我想为每个水平边框分配一个 id。例如，我想为顶部边框指定一个 id 为 0 的 id；第二个顶部边框的 id 为 1，等等 但是，我不知道该怎么做。希望有人能帮助我。
html:
/* js: */
$(document).ready(function() {
var table = document.createElement('table');
for (var i = 0; i < 4; i++){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
// assign the id
td1.id = i;
tr.appendChild(td1);
table.appendChild(tr);
td1.className = "deco";
}
document.body.append(table);
});/* css: */
.deco {
border: 1px solid black;
}
table {
border-collapse:collapse;
border: 1px solid black;
}
table, td, th {
border: 1px solid black;
padding: 10px 20px;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
</body>
</html>最佳答案
这样试试
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
w3school table 查看 console.log 。id 分配有 td
已更新
$(document).ready(function() {
var table = document.createElement('table');
for (var i = 0; i < 4; i++){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
//td1.setAttribute("style", "border-bottom: none");
tr.appendChild(td1);
table.appendChild(tr);
td1.id = i;// id placed
td1.className = "deco";
}
document.body.append(table);
console.log($('table').html())
});.deco {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
table{
border: 1px solid black;
}
td, th {
border: 1px solid black;
padding:10px 20px;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
</body>
</html>关于javascript - 使用 javaScript 动态创建表时分配 id 时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40733746/