Menu
[EDIT] Thanks for the help from prasad and Vijayp, i solved the the issue of setting up borders. However, another question is not fully addressed. I apologized for not making it clear. My question is that after dynamically created the table. You can see there are 5 horenzontal borders.(Please see picture below) I want to assign each honrizontal border an id. For instance, I want to assgin the the top border an id of 0; the second top border an id of 1, etc However, I do not know how to do it. Hope someone could help me out.
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>
396
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>Try to set height and width of <td> in following manner:
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
