gpt4 book ai didi

javascript - 如何在js中生成灵活的宽度/高度/行/列的TABLE

转载 作者:行者123 更新时间:2023-12-02 22:39:34 30 4
gpt4 key购买 nike

我正在尝试添加选项以便能够为我的 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_rowsnum_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/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com