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

您可以使用两个选项：

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

Answer 3

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

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

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并更改标签的id并根据需要输入更容易。

Answer 5

例如，您已从SERVER中获取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;

}

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

5 个答案:

编辑：

编辑2：