vkosyj vkosyj - 13 days ago 4
CSS Question

Have trouble assigning the id when creating the table dynamically using javaScript

I used javaScript to dynamically create a table. I have a trouble setting up the borders. Please see the picture below. The left table is what I get when I run my code. The right table is what I want. By the way, I do not want T in the box but I have to add something otherwise the table might just shrink. Then I do not know how to set up the id of the border of each cell(also pointed out in the picture). I searched the website, it seems like I can use td1.id = "bla", but I do not know how to specify each border in the table. Code below is what I have tried so far. Hope someone could help me out. Thank you in advance.

enter image description here

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');
//td1.setAttribute("style", "border-bottom: none");
var text1 = document.createTextNode('T');
td1.appendChild(text1);
tr.appendChild(td1);
table.appendChild(tr);
td1.className = "deco";
}
document.body.append(table);

});

/* css: */

.deco {
border: 1px solid black;
}

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




Answer

try like this

table {
    border-collapse: collapse;
}

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

w3school table see the console.log .ids are alloted with td

updated

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

Comments