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 />');
}

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

请帮我用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]文本框必须出现在哪里......

当我打印textInputBoxusingconsole.log时，我得到以下信息：

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

可能是什么问题？

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

4

5 回答 5

16

您可以使用两个选项：

  1. 创建元素
  2. 内部HTML

创建元素是最快的方法（在这里查看。）：

$(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;
}
于 2013-09-17T09:43:24.603 回答
7

一个带有较少字符串化 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);
于 2016-04-27T16:25:47.193 回答
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>

于 2013-09-17T10:12:20.627 回答
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，它是一个函数调用，因此它会为您返回一个对象。您将看不到文本框，因为它需要添加。为此，您需要从 中剥离单个内容object，然后从中构造 html。

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

于 2013-09-17T10:53:13.600 回答
0

例如，您已从服务器收到 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;

}

于 2018-01-06T15:40:09.087 回答