我正在使用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进行了检索。
答案 0 :(得分:1)
有一种更简单的方法可以让用户编辑表(假设使用HTML 5浏览器):您可以将contentEditable = contentEditable添加到表中
<table contenteditable="contenteditable">
<tr>
<td>a</td><td>b</td>
</tr>
<tr>
<td>c</td><td>d</td>
</tr>
</table>
答案 1 :(得分:0)
我找到了解决方案。首先,编辑器允许用户输入无序列表。诀窍是获取他们的列表并将其转换为表。您可以通过用所需的任何符号分割单词来让他们指定所需的列。我用了,
这是一个jsfiddle-https://jsfiddle.net/zqmku0n4/1/
<ul id='my_oddly_formatted_list1' class='userList'>
<li > Column A,Column B,Column C, Column D</li>
<li>Value A1,Value B1,Value C1,</li>
<li>Value A2,Value B1,Value C2,</li>
<li>Value A3,Value B1,Value C3,</li>
<li>Value A4,Value B1,Value C4, Value D2</li>
<li>Value A4,Value B1,Value C4,</li>
<li>Value A4,Value B1,Anything,</li>
<li>Value A4,Value B1,Value C4,</li>
<li>Value A4,Value B1,Value C4,</li>
</ul>
jQuery.fn.tableCreate = function(){
return this.each(function() {
//get this element ID (don't need for example)
//var a = $(element).attr('id');
// pass Id to getElement
//var e = document.getElementById(a);
//create table element
var b = $('<table>');
//b.css('background-color', 'orange')
//b.style.border = '3px solid green'; // this can be an input */
//user input for table width
var c = '100%';
b.css('width', c)
console.log(c);
//user input for number of rows
//var d = parseInt(data.config.rowSelection1);
var d = $('<tbody>');
//user input for number of
//var f = parseInt(data.config.columnSelection1);
//create table dependent on user li input
$(this).find('li').each(function(i){
var f = $(this).html().split(',');
if (i == 0) {
var g = $('<thead>')
var h = 'orange'
/* g.style.backgroundColor = (h); */
var j = $('<tr>')
$.each(f, function(k) {
j.append($('<th>').html(f[k]));
});
b.append(g.append(j));
d.append(j);
} else {
var j = $('<tr>');
$.each(f, function(k){
j.append($('<td style="border:1px solid black; padding:10px; ">').html(f[k]));
});
d.append(j);
}
});
$(this).after(b.append(d)).remove();
});
};
$('ul.userList').tableCreate();