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

Posted 2023-03-05

【中文标题】如何使用 jQuery 动态创建 HTML 表格？

【英文标题】：How do I create HTML table using jQuery dynamically?

【发布时间】：2013-09-21 16:18:18

【问题描述】：

我正在尝试使用 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"  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 给我指路... :)

【参考方案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;

【参考方案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);

【参考方案3】：

您可以使用两个选项：

创建元素 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;

【讨论】：

我试过这个，我没有完全得到标题它转义了给定的值，假设如果我有Ex: My Home Connection，那么我只得到Ex:，其余的都被转义了。这就是为什么没有使用这个。 :) 感谢您的宝贵时间...

在这种情况下，您可以尝试使用一些轻量级的 JQuery 工具提示库

让我们continue this discussion in chat

你听说过脚本注入吗？您需要对文本值进行 HTML 编码

【参考方案4】：

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

看下面的代码：

HTML：

<table border="0" cellpadding="0"  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会容易得多。

【讨论】：

谢谢，不是我只有几行，而是列数仅在运行时决定。希望我没有错。

【参考方案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"  id='providersFormElementsTable'> </table>
</body>

【讨论】：

所有值都是动态的，而不是您在答案中给出的静态值。无论如何感谢您的努力。标签和输入名称等都是动态的。