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

我试图使用jQuery动态创建如下的HTML表格：

 
 
Nickname
 
 
 
 
CA Number
 
 
  

这是我的实际表格：

这是创建labelText id和labelText tr和td元素的方法：

 function createFormElement(id, labelText) { // create a new textInputBox button using supplied parameters var textInputBox = $('').attr({ type: "text", id: id, name: id }); // create a new textInputBox using supplied parameters var inputTypeLable = $('').append(textInputBox).append(labelText); // append the new radio button and label $('#providersFormElementsTable').append(inputTypeLable).append('
'); } 

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

请帮我用tool tip and tr td动态创建一个表。

编辑：

我几乎完成了以下代码：

 function createProviderFormFields(id, labelText,tooltip,regex) { var tr = '' ; // create a new textInputBox var textInputBox = $('').attr({ type: "text", id: id, name: id, title: tooltip }); // create a new Label Text tr += '' + labelText + ''; tr += '' + textInputBox + ''; tr +=''; return tr; } 

这里标签正确，输入框没有到来，它显示文本框必须来的[object Object] …

当我使用console.log打印textInputBox ，我得到以下内容：

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

可能是什么问题？

感谢@theghostofc向我展示了路径… 🙂

Answer 1

您可以使用两个选项：

1. 的createElement
2. 的innerHTML

创建元素是最快的方法（请在此处查看 。）：

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

InnerHTML是另一种流行的方法：

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

检查一个关于如何使用jQuery创建一个包含行的新表的实例， 并将其包装在div中 。

也可能有其他方法。 请以此为出发点，而不是复制粘贴解决方案。

编辑：

检查使用DOM动态创建表

编辑2：

恕我直言，你是混合对象和内部HTML。 让我们尝试使用纯粹的内部html方法：

 function createProviderFormFields(id, labelText, tooltip, regex) { var tr = '' ; // create a new textInputBox var textInputBox = ''; // create a new Label Text tr += '' + labelText + ''; tr += '' + textInputBox + ''; tr +=''; return tr; } 

Answer 2

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

 var container = $('#my-container'), table = $(''); users.forEach(function(user) { var tr = $(''); ['ID', 'Name', 'Address'].forEach(function(attr) { tr.append(''); }); table.append(tr); }); container.append(table);
' + user[attr] + ' 

Answer 3

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

Answer 4

我知道你想动态创建东西。 这并不意味着您必须实际构建DOM元素才能执行此操作。 你可以使用html来实现你想要的。

看下面的代码：

HTML：

JS：

 createFormElement("Nickname","nickname") function createFormElement(labelText, id) { $("#providersFormElementsTable").html("Nickname"); $('#providersFormElementsTable').append('
'); } 

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

工作演示：

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

只需构造html并根据需要更改标签的id和输入就容易得多。

Answer 5

例如，您已从服务器获得JASON数据。

  var obj = JSON.parse(msg); var tableString =""; tableString +=""; for (var i=0; i",obj[i].name, obj[i].age, obj[i].birthday); } tableString +="
Name
City
Birthday
{0}
{1}
{2}
"; 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; 

}