我正在开发一个 Duda 网站小部件(类似于 WordPress 插件)，它将允许网站编辑器的用户动态创建表格。到目前为止，我能够创建表格，但我坚持允许用户向各个单元格添加内容。
这是我到目前为止所拥有的:
function tableCreate(){
//get this element ID
var a = $(element).attr('id');
// pass Id to getElement
var e = document.getElementById(a);
//create table element
var b = document.createElement('table');
//user input for table width
var c = data.config.tW1;
//user input for number of rows
var d = parseInt(data.config.rowSelection1);
//user input for number of
var f = parseInt(data.config.columnSelection1);
//create table dependent on user input
b.style.width = (c + '%');
//b.style.height =
b.style.border = '3px solid green';
//i = rows j = columns
for(var i = 0; i < d; i++){
var tr = b.insertRow();
for(var j = 0; j < f; j++){
if(i == d && j == f){
break;
} else {
var td = tr.insertCell();
td.appendChild(document.createTextNode('Table Cell'));
td.style.border = '1px solid black';
}
}
}
e.appendChild(b);
}
tableCreate();
我可以检索用户输入。例如，假设我添加了一个文本输入，我为用户的输入分配了一个变量(textInput1)，我使用 data.config.textInput1 检索该变量。
最佳答案
有一种更简单的方法可以让用户编辑表格(假设使用 HTML 5 浏览器):您只需将 contentEditable=contentEditable 添加到表格即可
<table contenteditable="contenteditable">
<tr>
<td>a</td><td>b</td>
</tr>
<tr>
<td>c</td><td>d</td>
</tr>
</table>
关于javascript - 将内容添加到动态创建的表格的各个单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54448158/