Как создать динамическую таблицу HTML с помощью jQuery?

Я пытаюсь создать таблицу HTML, такую как динамически используя 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>

Это моя фактическая таблица:

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

Спасибо за помощь...

EDIT:

Я почти сделал со следующим кодом:

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, который показал мне путь...:)

Ответ 1

Вы можете использовать два варианта:

createElement
InnerHTML

Создать элемент - самый быстрый способ (отметьте здесь.):

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

InnerHTML - еще один популярный подход:

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

Посмотрите реальный пример на Как создать новую таблицу с строками с помощью jQuery и обернуть ее внутри div.

Могут быть и другие подходы. Используйте это как отправную точку, а не как решение для копирования-вставки.

Изменить:

Проверить Динамическое создание таблицы с DOM

Изменить 2:

IMHO, вы смешиваете объект и внутренний 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;
}

Ответ 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

Вот полный пример того, что вы ищете:

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

Ответ 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 всегда будет оставаться прежней.

РАБОЧАЯ ДЕМО:

Кроме того, когда вы используете процесс, упомянутый в своем сообщении, вы получаете только [object Object]. Это потому что, когда вы вызываете createProviderFormFields, это вызов функции и, следовательно, возвращает объект для вас. Вы не увидите текстовое поле, поскольку его необходимо добавить. Для этого вам нужно разделить индивидуальный контент на object, а затем построить html из него.

Намного проще построить только html и изменить id метки и ввода в соответствии с вашими потребностями.