All geek questions in one place

Cannot assign id when creating table dynamically using javaScript

[EDIT] Thanks for the help from prasadam and Vijaypa, I solved the problem of creating borders. However, another issue is not completely resolved. I apologized for not letting me know. My question is after dynamically creating a table. You can see that there are 5 horizontal borders (see the figure below). I want to assign an identifier to each horizontal border. For example, I want to dispute the upper bound with identifier 0; the second upper bound is the id of 1, etc. However, I do not know how to do this. Hope someone can help me.

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'); // 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>
+5
source share
2 answers

try it

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

see the w3school table in console.log. id highlighted 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>
+5
source

Try setting the height and width of the <td> as follows:

Height:

 td1.height = 50;

width:

 td { width: 50px; } 

 /* 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'); var text1 = document.createTextNode(''); td1.appendChild(text1); tr.appendChild(td1); table.appendChild(tr); td1.className = "deco"; td1.height = 50; } document.body.append(table); }); 
 /* css: */ table { border-collapse: collapse; } .deco { border: 1px solid black; } td { width: 50px; } 
 <!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>
+2
source

Source: https://habr.com/ru/post/1260113/

More articles:


All Articles