我正在尝试添加选项以便能够为我的 Javascript 表输入列/行/宽度/高度..但似乎无法使其工作。我完全没有编码背景.. 1 个月前才进入这门类(class)..
我尝试到处查找，但我无法理解正在发生的事情..
<html>
<body>
<form>
<p>No. of Cols: <input type="text" name="cols" id="cols" value="3" />
</p>
<p> No. of Rows<input type="text" name="rows" id="rows" value="3" />
Sample Cell Data <input type="text" id="sample" /> </p>
<p> Cell Height (in pixels)<input type="text" id="height" />
Cell wdith in pixels<input type="text" id="wdith" /> </p>
<Button onClick="generate()">Generate Table</button>
<button onClick="deleteTable()">Clear Table</button>
</form>
<hr />
<p id=generatedTable> </p>
</body>
<script>
function generate()
var myTable = document.getElementById("generatedTable");
var table = document.createElement('TABLE');
table.border='1';
var tableBody = document.create Element('TBODY');
table.appendChild(tableBody);
for (var y=0; y<num_rows; y++)
{
var num_rows = document.getElementById('rows').value;
tableBody.appendChild(tr);
var num_cols = document.getElementById('cols').value;
for (var x=0; x<num_cols; x++)
{
var td = document.createElement('TD');
td.width = 10; td.height = 10; td.align = "center";
var cellID = "cell [" + x + ", " + y + "]";
td.setAttribute("id",cellID.toString());
td.addEventListener("click", function(){cellClicked(this);});
// ... research and add other mouse events!!!
td.appendChild(document.createTextNode("Cell " + x + "," + y));
tr.appendChild(td);
}
}
myTable.appendChild(table);
}
}
</script>
</html>
最佳答案
在代码中，您提供了num_rows和num_cols是列/行的数量，宽度/高度是相关样式；所以，你不想用 javascript 来做，你可以提供一些像这样的样式:
.custom-width{
/* some style */
}
然后在创建td后在您的代码中:
var td = document.createElement('TD');
td.classList.add('custom-width')
// do other stuff and append it
关于javascript - 如何在js中生成灵活的宽度/高度/行/列的TABLE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58628113/