如何使用 jQuery 动态创建 HTML 表格? [英] How do I create HTML table using jQuery dynamically?
问题描述
我正在尝试使用 jQuery 动态创建如下所示的 HTML 表格:
<tr><td>昵称</td><td><input type="text" id="nickname" name="nickname"></td></tr><tr><td>CA号码</td><td><input type="text" id="account" name="account"></td></tr>
这是我的实际表:
这是将使用 id
和 labelText
创建 tr
和 td
元素的方法:
function createFormElement(id, labelText) {//使用提供的参数创建一个新的 textInputBox 按钮var textInputBox = $('<input/>').attr({类型:文本",id:id,名称:id});//使用提供的参数创建一个新的 textInputBoxvar inputTypeLable = $('<label/>').append(textInputBox).append(labelText);//添加新的单选按钮和标签$('#providersFormElementsTable').append(inputTypeLable).append('<br/>');}
我还有一个值将显示为工具提示.
请帮助我使用工具提示和 tr td
动态创建表格.
我几乎完成了以下代码:
function createProviderFormFields(id, labelText,tooltip,regex) {var tr = '';//创建一个新的文本输入框var textInputBox = $('<input/>').attr({类型:文本",身份证:身份证,姓名:身份证,标题:工具提示});//创建一个新的标签文本tr += ''+ labelText + '</td>';tr += ' '+ 文本输入框 + '</td>';tr +=' ';返回 tr;}
这里标签正常,输入框没有出现,它显示[object Object]
文本框必须出现的地方......
当我使用 console.log
打印 textInputBox
时,我得到以下信息:
[input#nickname, constructor: function, init: function, selector: "", jquery: "1.7.2", size: function...]
可能是什么问题?
感谢 @theghostofc
向我展示了路径... :)
您可以使用两个选项:
- 创建元素
- 内部HTML
创建元素是最快的方式(查看此处.):
$(document.createElement('table'));
InnerHTML 是另一种流行的方法:
$("#foo").append("hello world");//检查表的相似性.
查看关于 如何使用 jQuery 创建包含行的新表并将其包装在 div 上的真实示例..><块引用>
可能还有其他方法.请将此作为起点,而不是作为复制粘贴解决方案.
编辑 2:
恕我直言,您正在混合对象和内部 HTML.让我们尝试使用纯内部 html 方法:
function createProviderFormFields(id, labelText, tooltip, regex) {var tr = '';//创建一个新的文本输入框var textInputBox = '<input type="text" id="' + id + '" name="' + id + '" title="' + tooltip + '"/>';//创建一个新的标签文本tr += ''+ labelText + '</td>';tr += ' '+ 文本输入框 + '</td>';tr +=' ';返回 tr;}
I am trying to create a HTML table like the following dynamically using jQuery:
<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>
This is my actual table :
<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>
This is the method which will create tr
and td
elements taking id
and 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 />');
}
I also have a value which will be shown as tool tip.
Please help me to create a table dynamically with tool tip and tr td
.
EDIT:
I have almost done with the following code:
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;
}
Here label is coming properly and the input box is not coming and it shows [object Object]
where the text box has to come...
When I printed the textInputBox
using console.log
, I get the following:
[input#nickname, constructor: function, init: function, selector: "", jquery: "1.7.2", size: function…]
What could be the issue?
Thanks to @theghostofc
who showed me path... :)
You may use two options:
- createElement
- InnerHTML
Create Element is the fastest way (check here.):
$(document.createElement('table'));
InnerHTML is another popular approach:
$("#foo").append("<div>hello world</div>"); // Check similar for table too.
Check a real example on How to create a new table with rows using jQuery and wrap it inside div.
There may be other approaches as well. Please use this as a starting point and not as a copy-paste solution.
Edit:
Check Dynamic creation of table with DOM
Edit 2:
IMHO, you are mixing object and inner HTML. Let's try with a pure inner html approach:
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;
}
这篇关于如何使用 jQuery 动态创建 HTML 表格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!