vkosyj vkosyj - 15 days ago 7
CSS Question

Assign each horizontal border of the table an id

I use JavaScript to dynamically create a table. In the picture below, You can see there are 5 horizontal borders. I want to assign each horizontal border an id. For instance, I want to assign the the top border an id of 0; the second top border an id of 1, etc. The code that I wrote is actually assigning the id of each row which is not what I want. When I run my code, I can see the second row shakes rather than the second horizontal border shakes. Basically, I want to create 5 horizontal lines and assign each line a id. Maybe creating a table to get 5 lines is a overkill. Hope someone could help me out. Thank you in advance.

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");

});

Answer

Yes, creating a table just for drawing horizontal lines is an overkill. You can use <hr> tag instead. Just like you have created 5 rows in a table, create 5 <hr. Also, you won't need any CSS decoration.

$(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>