如何动态地使用jQuery创建HTML表？

Question

我试图使用jQuery动态创建如下的HTML表格:

<table id='providersFormElementsTable'>
    <tr>
        <td>Nickname</td>
        <td><input type="text" id="nickname" name="nickname"></td>
    </tr>
    <tr>
        <td>CA Number</td>
        <td><input type="text" id="account" name="account"></td>
    </tr>
</table>

这是我的实际表格:

<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>

这是将创建tr和td元素采取的方法id和labelText:

function createFormElement(id, labelText) {
    // create a new textInputBox button using supplied parameters
    var textInputBox = $('<input />').attr({
        type: "text", id: id, name: id
    });
    // create a new textInputBox using supplied parameters
    var inputTypeLable = $('<label />').append(textInputBox).append(labelText);

    // append the new radio button and label
    $('#providersFormElementsTable').append(inputTypeLable).append('<br />');
}

我还有一个值将显示为工具提示.

请帮我动态创建一个表tool tip and tr td.

编辑:

我几乎完成了以下代码:

function createProviderFormFields(id, labelText,tooltip,regex) {
    var tr = '<tr>' ;
    // create a new textInputBox  
    var textInputBox = $('<input />').attr({
        type: "text",
        id: id, name: id,
        title: tooltip
    });  

    // create a new Label Text
    tr += '<td>' + labelText  + '</td>';
    tr += '<td>' + textInputBox + '</td>';  
    tr +='</tr>';
    return tr;
}

这里标签正确,输入框没有到来,它显示[object Object]了文本框必须来的位置......

当我打印textInputBox使用时console.log,我得到以下内容:

[input#nickname, constructor: function, init: function, selector: "", jquery: "1.7.2", size: function…]

可能是什么问题？

感谢@theghostofc谁给我看路径... :)

Answer 1

您可以使用两个选项:

1. 的createElement
2. 的innerHTML

创建元素是最快的方法(请在此处查看.):

$(document.createElement('table'));

InnerHTML是另一种流行的方法:

$("#foo").append("<div>hello world</div>"); // Check similar for table too.

检查一个关于如何使用jQuery创建一个包含行的新表的实例,并将其包装在div中.

也可能有其他方法.请以此为出发点,而不是复制粘贴解决方案.

编辑:

检查使用DOM动态创建表

编辑2:

恕我直言,你是混合对象和内部HTML.让我们尝试使用纯粹的内部html方法:

function createProviderFormFields(id, labelText, tooltip, regex) {
    var tr = '<tr>' ;
         // create a new textInputBox  
           var textInputBox = '<input type="text" id="' + id + '" name="' + id + '" title="' + tooltip + '" />';  
        // create a new Label Text
            tr += '<td>' + labelText  + '</td>';
            tr += '<td>' + textInputBox + '</td>';  
    tr +='</tr>';
    return tr;
}

Answer 2

一个字符串化程度较低的示例:

var container = $('#my-container'),
  table = $('<table>');

users.forEach(function(user) {
  var tr = $('<tr>');
  ['ID', 'Name', 'Address'].forEach(function(attr) {
    tr.append('<td>' + user[attr] + '</td>');
  });
  table.append(tr);
});

container.append(table);