Question

我正在尝试将2个按钮放入带有JavaScript的表格单元格

我有这样的事情：

var table_cell = document.getElementById("table_cell")
var button_A = document.createElement("input")
button_A.setAttribute("value","BUTTON A")
button_A.setAttribute("type","button")
var button_B = document.createElement("input")
button_B.setAttribute("value","BUTTON A")
button_B.setAttribute("type","button")
table_cell.appendChild(button_A)
table_cell.appendChild(button_B)

按钮并排排列，而不是一个向上和向下一个。我试图让每个级别有一个按钮

 _____________   
|  _________  |   
| |_________| |     
|  _________  |   
| |_________| |     
|_____________|

而不是

 __________________________
|  _________   _________   |
| |_________| |_________|  |
|__________________________|

我尝试在table_cell上附加一个textnode，其中包含转义字符，例如“\ r \ n”和“＆amp;＃10＆amp; 38”，但都不起作用。

如果有JS的解决方案，我将不胜感激

Answer 1

如何在按钮之间使用<br>标记

table_cell.appendChild(button_A);
table_cell.appendChild(document.createElement('br'));
table_cell.appendChild(button_B);

Answer 2

你可以这样做：

button_A.style.display = 'block';
button_B.style.display = 'block';

但使用CSS可能是最好的：

input[type="button"] {
    display:block;
}

Answer 3

table_cell.appendChild(button_A)
table_cell.appendChild(document.createElement("br"))
table_cell.appendChild(button_B)

Answer 4

添加换行符（<br />）元素：

var table_cell = document.getElementById("table_cell");
var button_A = document.createElement("input");
button_A.setAttribute("value","BUTTON A");
button_A.setAttribute("type","button");
var button_B = document.createElement("input");
button_B.setAttribute("value","BUTTON A");
button_B.setAttribute("type","button");
var newline = document.createElement("br"); // <-- Add a newline
table_cell.appendChild(button_A);
table_cell.appendChild(newline); // <-- and append
table_cell.appendChild(button_B);

<强> jsFiddle example

表格单元格中每行一个按钮

4 个答案: