如何使用 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]文本框必须来...

当我使用console.log 打印textInputBox 时，我得到以下信息：

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

可能是什么问题？

感谢@theghostofc 给我指路... :)

Answer 1

例如，您已从服务器收到 JASON 数据。

                var obj = JSON.parse(msg);
                var tableString ="<table id='tbla'>";
                tableString +="<th><td>Name<td>City<td>Birthday</th>";


                for (var i=0; i<obj.length; i++){
                    //alert(obj[i].name);
                    tableString +=gg_stringformat("<tr><td>{0}<td>{1}<td>{2}</tr>",obj[i].name, obj[i].age, obj[i].birthday);
                }
                tableString +="</table>";
                alert(tableString);
                $('#divb').html(tableString);

这里是 gg_stringformat 的代码

function gg_stringformat() {
var argcount = arguments.length,
    string,
    i;

if (!argcount) {
    return "";
}
if (argcount === 1) {
    return arguments[0];
}
string = arguments[0];
for (i = 1; i < argcount; i++) {
    string = string.replace(new RegExp('\\{' + (i - 1) + '}', 'gi'), arguments[i]);
}
return string;

}

Answer 2

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

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);

Answer 3

您可以使用两个选项：

1. 创建元素
2. InnerHTML

创建元素是最快的方法（检查here。）：

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

InnerHTML 是另一种流行的方法：

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

查看How to create a new table with rows using jQuery and wrap it inside div上的真实示例。

可能还有其他方法。请将此作为起点，而不是作为复制粘贴解决方案。

编辑：

查看Dynamic creation of table with 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 4

我了解您想要动态创建内容。这并不意味着您必须实际构建 DOM 元素才能做到这一点。您可以使用html 来实现您想要的。

看下面的代码：

HTML：

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

JS：

createFormElement("Nickname","nickname")

function createFormElement(labelText, id) {

$("#providersFormElementsTable").html("<tr><td>Nickname</td><td><input type='text' id='"+id+"' name='nickname'></td><lable id='"+labelText+"'></lable></td></tr>");
$('#providersFormElementsTable').append('<br />');
}

这个动态地做你想做的事，它只需要 id 和 labelText 让它工作，这实际上必须是唯一的动态变量，因为只有它们会改变。您的 DOM 结构将始终保持不变。

WORKING DEMO:

此外，当您使用您在帖子中提到的流程时，您只会得到[object Object]。那是因为当您调用 createProviderFormFields 时，它是一个函数调用，因此它会为您返回一个对象。您将看不到文本框，因为它需要添加。为此，您需要从object 中删除单个内容，然后从中构造 html。

只构建html并根据需要更改标签和输入的ids会容易得多。

Answer 5

这是您正在寻找的完整示例：

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $( document ).ready(function() {
            $("#providersFormElementsTable").html("<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>");
        });
    </script>
</head>

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