gpt4 book ai didi

javascript - 为表格的每个水平边框分配一个 id

转载 作者:太空宇宙 更新时间:2023-11-04 09:31:38 25 4
gpt4 key购买 nike

我使用 JavaScript 动态创建表格。在下图中,您可以看到有 5 个水平边框。我想为每个水平边框分配一个 id。例如,我想为顶部边框分配一个 id 为 0;第二个顶部边框的 id 为 1,等等。我编写的代码实际上是分配每一行的 id,这不是我想要的。当我运行我的代码时,我可以看到第二行抖动而不是第二个水平边框抖动。基本上,我想创建 5 条水平线并为每条线分配一个 id。也许创建一个表来获得 5 行是一种矫枉过正。希望有人能帮助我。提前谢谢你。

enter image description here

html:

<!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>

/* CSS: */

.deco {
border: 1px solid black;
}

table {
border-collapse:collapse;
border: 1px solid black;
}

table, td, th {
border: 1px solid black;
padding: 10px 20px;
}

js:

$(document).ready(function() {
var table = document.createElement('table');
for (var i = 0; i < 5; i++){

var tr = document.createElement('tr');
var td1 = document.createElement('td');
tr.appendChild(td1);
table.appendChild(tr);
td1.id = i;// id placed
td1.className = "deco";
}
document.body.append(table);
$('#' + 1).effect("shake");

});

最佳答案

是的,创建一个表格只是为了绘制水平线是一种矫枉过正。您可以使用 <hr>标签代替。就像你在一个表中创建了 5 行一样,创建 5 <hr .此外,您不需要任何 CSS 修饰。

$(document).ready(function() {

for (var i = 0; i < 5; i++) {
var hr = document.createElement('hr');
hr.id = "hr" + i;
document.body.append(hr);
}
$('#hr' + 1).effect("shake");
});
<!DOCTYPE html>
<html>

<head>
<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>

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

</head>

<body>
<h1>Shaking line</h1>
</body>

</html>

关于javascript - 为表格的每个水平边框分配一个 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40736199/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com