Question

[编辑] 感谢prasad和Vijayp的帮助，我解决了设置边框的问题。但是，另一个问题没有得到充分解决。我为没说清楚而道歉。我的问题是动态创建表后。你可以看到有5个horenzontal边界。（请参见下图）我想为每个honrizontal边界分配一个id。例如，我想在顶部边框上标识id为0;第二个上边框的id为1等等但是，我不知道怎么做。希望有人可以帮助我。

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>

Answer 1

试试这个

table {
    border-collapse: collapse;
}

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

w3school table 请参阅console.log。id分配td

已更新

＆＃13;

$(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())
     
});

＆＃13;

.deco {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
}

table{
    border: 1px solid black;
}
td, th {
    border: 1px solid black;
  padding:10px 20px;
}

＆＃13;

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

＆＃13;

Answer 2

尝试以下列方式设置<td>的高度和宽度：

高度：

td1.height = 50;

宽度：

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>

使用javaScript动态创建表时无法分配id

2 个答案: