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

Question

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

28

我正在尝试使用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 />');
}

我也有一个值，它将显示为工具提示。

请帮我动态创建带有工具提示和的表格。

编辑：

我几乎完成了以下代码：

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给我指路... :)

- Java Questions

5个回答

8

一个稍微少一些字符串化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);

- Luke W

2

例如，您从服务器收到了JSON数据。

                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;

}

- GGSoft

2

以下是您所需要的完整示例：

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

- Fabricio

1

所有的值都是动态的，而不是你在回答中提供的静态的。不管怎样，感谢你的努力。标签和输入名称等都是动态的。 - Java Questions

2

我理解您想要动态创建东西。这并不意味着您必须实际构建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结构将始终保持不变。

此外，当你使用你在帖子中提到的过程时，你只会得到[object Object]。这是因为当你调用createProviderFormFields时，它是一个函数调用，因此它会为你返回一个对象。你将看不到文本框，因为它需要被添加。为此，你需要从对象中剥离出单独的内容，然后构建html。

更容易的方法是仅构建html，并根据你的需要更改和的id。

- The Dark Knight

谢谢，不是我只有几行数据，而是列数在运行时才确定。希望我没有理解错。 - Java Questions

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vivek Jain · Accepted Answer

你可以使用两个选项：

createElement
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;
}