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

时间:2016-11-22 07:37:09

标签: javascript html css

我使用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");

});

1 个答案:

答案 0 :(得分:1)

是的,创建一个仅用于绘制水平线的表是一种过度杀伤力。您可以改用<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>