将内容添加到动态创建的单个单元格 Table

Question

我正在开发 Duda 网站小部件（类似于 wordpress 插件），它将允许网站编辑器的用户动态创建 table。到目前为止，我可以创建 table down，但我仍然坚持允许用户向单个单元格添加内容。

这是我目前的情况：

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 检索它。

Answer 1

有一种更简单的方法让用户编辑 table（假设 HTML 5 浏览器）：您只需将 contentEditable=contentEditable 添加到你的 table

<table contenteditable="contenteditable">
<tr>
<td>a</td><td>b</td>
</tr>
<tr>
<td>c</td><td>d</td>
</tr>
</table>

Answer 2

我找到了解决办法。首先，编辑器允许用户输入无序列表。诀窍是获取他们的列表并将其转换为 table。您可以让他们通过用您想要的任何符号拆分单词来指定他们想要的列。我用了 ,

这是一个 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();

将内容添加到动态创建的单个单元格 Table

Add Content to Individual Cells of Dynamically Created Table

javascript

html-table

handlebars.js