Создать таблицу с помощью jQuery - добавить

98

У меня на странице div:

<div id="here_table"></div>

и в jquery:

for(i=0;i<3;i++){
    $('#here_table').append( 'result' +  i );
}

это генерирует для меня:

<div id="here_table">
    result1 result2 result3 etc
</div>

Я бы хотел получить это в таблице:

<div id="here_table">
    <table>
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
    </table>
</div>

Я делаю:

$('#here_table').append(  '<table>' );

 for(i=0;i<3;i++){
    $('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

 $('#here_table').append(  '</table>' );

но это генерирует для меня:

<div id="here_table">
    <table> </table> !!!!!!!!!!
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
</div>

Зачем? как я могу сделать это правильно?

В прямом эфире: http://jsfiddle.net/n7cyE/

javascript jquery html Марк Фонди
источник

Ответы:

190

Эта строка:

$('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );

Присоединяется к div#here_tableне новому table.

Есть несколько подходов:

/* Note that the whole content variable is just a string */
var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#here_table').append(content);

Но при вышеупомянутом подходе становится труднее добавлять стили и делать что-то динамически <table>.

Но как насчет этого, он делает то, что вы ожидаете, почти отлично:

var table = $('<table>').addClass('foo');
for(i=0; i<3; i++){
    var row = $('<tr>').addClass('bar').text('result ' + i);
    table.append(row);
}

$('#here_table').append(table);

Надеюсь, это поможет.

шрансара
источник
4
для второго примера вам нужен td внутри вашего tr, а затем введите .text на td. Также при создании элемента html с помощью jquery вам нужен только открывающий тег. $ ('<table>') отлично работает.
m4tt1mus
В примере с jquery вы можете использовать меньшие имена тегов, например, $('<table/>')вместо $('<table></table>)и $('<tr/>')вместо $('<tr></tr>)и т. Д.
phyatt
37

Вам нужно добавить trвнутрь, tableпоэтому я обновил ваш селектор внутри вашего цикла и удалил закрытие, tableпотому что это не нужно.

$('#here_table').append(  '<table />' );

 for(i=0;i<3;i++){
    $('#here_table table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

Основная проблема заключалась в том, что вы добавляли trв divhere_table.

Изменить: вот версия JavaScript, если производительность вызывает беспокойство. Использование фрагмента документа не приведет к перекомпоновке каждой итерации цикла.

var doc = document;

var fragment = doc.createDocumentFragment();

for (i = 0; i < 3; i++) {
    var tr = doc.createElement("tr");

    var td = doc.createElement("td");
    td.innerHTML = "content";

    tr.appendChild(td);

    //does not trigger reflow
    fragment.appendChild(tr);
}

var table = doc.createElement("table");

table.appendChild(fragment);

doc.getElementById("here_table").appendChild(table);
Крейг
источник
1
отличный ответ! Спасибо! Я использовал вашу версию JavaScript для отображения динамической таблицы в App Inventor puravidaapps.com/table.php
Тайфун
2
Не следует использовать innerHTML для передачи обычного текста
Села
20

Когда вы используете append, jQuery ожидает, что это будет правильно сформированный HTML (подсчитывается простой текст). appendне нравится делать +=.

Вам нужно сначала создать таблицу, а затем добавить ее.

var $table = $('<table/>');
for(var i=0; i<3; i++){
    $table.append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}
$('#here_table').append($table);
Ракетный Хазмат
источник
4
+1 Лучший подход здесь - показывает, что jQuery действительно работает с элементами DOM, а не с сырым HTML.
Tadeck 05
13

Или сделайте это так, чтобы использовать ВСЕ jQuery. Каждый может перебирать любые данные, будь то элементы DOM или массив / объект.

var data = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
var numCols = 1;           


$.each(data, function(i) {
  if(!(i%numCols)) tRow = $('<tr>');

  tCell = $('<td>').html(data[i]);

  $('table').append(tRow.append(tCell));
});
​

http://jsfiddle.net/n7cyE/93/

Тур Джейсон Франсен
источник
Есть ли какая-то конкретная настройка, чтобы заставить это работать вне jsFiddle? Попытка выполнить это в пустом файле js вернет «Uncaught TypeError: Невозможно прочитать свойство 'each' of undefined»
canadiancreed
4
Вы уверены, что jQuery загружен?
Henridv
Я бы изменил строку, чтобы не использовать HTML и вместо этого использовать ТЕКСТ (поскольку в этом примере мы только вставляем текст в ячейку таблицы) tCell = $ ('<td>') .text (data [i]);
PerryCS
4

Чтобы добавить несколько столбцов и строк, мы также можем выполнить конкатенацию строк. Не лучший способ, но точно работает.

             var resultstring='<table>';
      for(var j=0;j<arr.length;j++){
              //array arr contains the field names in this case
          resultstring+= '<th>'+ arr[j] + '</th>';
      }
      $(resultset).each(function(i, result) {
          // resultset is in json format
          resultstring+='<tr>';
          for(var j=0;j<arr.length;j++){
              resultstring+='<td>'+ result[arr[j]]+ '</td>';
          }
          resultstring+='</tr>';
      });
      resultstring+='</table>';
          $('#resultdisplay').html(resultstring);

Это также позволяет динамически добавлять в таблицу строки и столбцы без жесткого кодирования имен полей.

Апарна
источник
3

Вот что вы можете сделать: http://jsfiddle.net/n7cyE/4/

$('#here_table').append('<table></table>');
var table = $('#here_table').children();
 for(i=0;i<3;i++){
    table.append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

С уважением!

Минько Гечев
источник
2

Для загрузки нескольких файлов с помощью jquery выполняется следующее:

Кнопка ввода файла:

<div>
 <input type="file" name="uploadFiles" id="uploadFiles" multiple="multiple" class="input-xlarge" onchange="getFileSizeandName(this);"/> 
</div>

Отображение имени файла и размера файла в таблице:

<div id="uploadMultipleFilediv">
<table id="uploadTable" class="table table-striped table-bordered table-condensed"></table></div>

Javascript для получения имени файла и размера файла:

function getFileSizeandName(input)
{
    var select = $('#uploadTable');
    //select.empty();
    var totalsizeOfUploadFiles = "";
    for(var i =0; i<input.files.length; i++)
    {
        var filesizeInBytes = input.files[i].size; // file size in bytes
        var filesizeInMB = (filesizeInBytes / (1024*1024)).toFixed(2); // convert the file size from bytes to mb
        var filename = input.files[i].name;
        select.append($('<tr><td>'+filename+'</td><td>'+filesizeInMB+'</td></tr>'));
        totalsizeOfUploadFiles = totalsizeOfUploadFiles+filesizeInMB;
        //alert("File name is : "+filename+" || size : "+filesizeInMB+" MB || size : "+filesizeInBytes+" Bytes");               
    }           
}
lk.annamalai
источник
2

Или статический HTML без цикла для создания некоторых ссылок (или чего-то еще). Разместите <div id="menu">на любой странице, чтобы воспроизвести HTML.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>HTML Masterpage</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

        <script type="text/javascript">
            function nav() {
                var menuHTML= '<ul><li><a href="#">link 1</a></li></ul><ul><li><a href="#">link 2</a></li></ul>';
                $('#menu').append(menuHTML);
            }
        </script>

        <style type="text/css">
        </style>
    </head>
    <body onload="nav()">
        <div id="menu"></div>
    </body>
    </html>
HTML-джедаи
источник
2

Я написал неплохую функцию, которая может генерировать вертикальные и горизонтальные таблицы:

function generateTable(rowsData, titles, type, _class) {
    var $table = $("<table>").addClass(_class);
    var $tbody = $("<tbody>").appendTo($table);


    if (type == 2) {//vertical table
        if (rowsData.length !== titles.length) {
            console.error('rows and data rows count doesent match');
            return false;
        }
        titles.forEach(function (title, index) {
            var $tr = $("<tr>");
            $("<th>").html(title).appendTo($tr);
            var rows = rowsData[index];
            rows.forEach(function (html) {
                $("<td>").html(html).appendTo($tr);
            });
            $tr.appendTo($tbody);
        });

    } else if (type == 1) {//horsantal table 
        var valid = true;
        rowsData.forEach(function (row) {
            if (!row) {
                valid = false;
                return;
            }

            if (row.length !== titles.length) {
                valid = false;
                return;
            }
        });

        if (!valid) {
            console.error('rows and data rows count doesent match');
            return false;
        }

        var $tr = $("<tr>");
        titles.forEach(function (title, index) {
            $("<th>").html(title).appendTo($tr);
        });
        $tr.appendTo($tbody);

        rowsData.forEach(function (row, index) {
            var $tr = $("<tr>");
            row.forEach(function (html) {
                $("<td>").html(html).appendTo($tr);
            });
            $tr.appendTo($tbody);
        });
    }

    return $table;
}

пример использования:

var title = [
    'مساحت موجود',
    'مساحت باقیمانده',
    'مساحت در طرح'
];

var rows = [
    [number_format(data.source.area,2)],
    [number_format(data.intersection.area,2)],
    [number_format(data.deference.area,2)]
];

var $ft = generateTable(rows, title, 2,"table table-striped table-hover table-bordered");

$ft.appendTo( GroupAnalyse.$results );

var title = [
    'جهت',
    'اندازه قبلی',
    'اندازه فعلی',
    'وضعیت',
    'میزان عقب نشینی',
];

var rows = data.edgesData.map(function (r) {
    return [
        r.directionText,
        r.lineLength,
        r.newLineLength,
        r.stateText,
        r.lineLengthDifference
    ];
});


var $et = generateTable(rows, title, 1,"table table-striped table-hover table-bordered");

$et.appendTo( GroupAnalyse.$results );

$('<hr/>').appendTo( GroupAnalyse.$results );

пример результата:

пример результата

MSS
источник
1

Рабочий пример с использованием метода, упомянутого выше, и с использованием JSON для представления данных. Это используется в моем проекте по работе с вызовами ajax, получающими данные с сервера.

http://jsfiddle.net/vinocui/22mX6/1/

В вашем html: <table id = 'here_table'> </ table>

Код JS:

function feed_table(tableobj){
    // data is a JSON object with
    //{'id': 'table id',
    // 'header':[{'a': 'Asset Tpe', 'b' : 'Description', 'c' : 'Assets Value', 'd':'Action'}], 
    // 'data': [{'a': 'Non Real Estate',  'b' :'Credit card',  'c' :'$5000' , 'd': 'Edit/Delete' },...   ]}

    $('#' + tableobj.id).html( '' );

    $.each([tableobj.header, tableobj.data], function(_index, _obj){
    $.each(_obj, function(index, row){
        var line = "";
        $.each(row, function(key, value){
            if(0 === _index){
                line += '<th>' + value + '</th>';    
            }else{
                line += '<td>' + value + '</td>';
            }
        });
        line = '<tr>' + line + '</tr>';
        $('#' + tableobj.id).append(line);
    });


    });    
}

// testing
$(function(){
    var t = {
    'id': 'here_table',
    'header':[{'a': 'Asset Tpe', 'b' : 'Description', 'c' : 'Assets Value', 'd':'Action'}], 
    'data': [{'a': 'Non Real Estate',  'b' :'Credit card',  'c' :'$5000' , 'd': 'Edit/Delete' },
         {'a': 'Real Estate',  'b' :'Property',  'c' :'$500000' , 'd': 'Edit/Delete' }
        ]};

    feed_table(t);
});
Джейкоб CUI
источник
1

Как по мне, такой подход красивее: 

String.prototype.embraceWith = function(tag) {
    return "<" + tag + ">" + this + "</" + tag + ">";
};

var results = [
  {type:"Fiat", model:500, color:"white"}, 
  {type:"Mercedes", model: "Benz", color:"black"},
  {type:"BMV", model: "X6", color:"black"}
];

var tableHeader = ("Type".embraceWith("th") + "Model".embraceWith("th") + "Color".embraceWith("th")).embraceWith("tr");
var tableBody = results.map(function(item) {
    return (item.type.embraceWith("td") + item.model.toString().embraceWith("td") + item.color.embraceWith("td")).embraceWith("tr")
}).join("");

var table = (tableHeader + tableBody).embraceWith("table");

$("#result-holder").append(table);
Василий Ковальчук
источник
0


Я предпочитаю наиболее читаемый и расширяемый способ использования jquery.
Кроме того, вы можете создавать полностью динамический контент на лету.
Начиная с версии jquery 1.4, вы можете передавать атрибуты элементам, что, по-
моему, убойная функция. Также код можно сохранить в чистоте.

$(function(){

        var tablerows = new Array();

        $.each(['result1', 'result2', 'result3'], function( index, value ) {
            tablerows.push('<tr><td>' + value + '</td></tr>');
        });

        var table =  $('<table/>', {
           html:  tablerows
       });

        var div = $('<div/>', {
            id: 'here_table',
            html: table
        });

        $('body').append(div);

    });

Дополнение: передавая более одного тега "html", вы должны использовать обозначение массива, например: например

var div = $('<div/>', {
            id: 'here_table',
            html: [ div1, div2, table ]
        });

лучшие RGDS.
Франц

FranzCC
источник
0 
<table id="game_table" border="1">

и JQuery

var i;
for (i = 0; ii < 10; i++) 
{

        var tr = $("<tr></tr>")
        var ii;
        for (ii = 0; ii < 10; ii++) 
        {
        tr.append(`<th>Firstname</th>`)
        }

$('#game_table').append(tr)
}
ryosuke-hujisawa
источник
Добро пожаловать в Stackoverflow! Вопрос, на который вы пишете этот ответ, очень старый (6 лет), и на него уже широко ответили другие пользователи. Вы можете увидеть возраст вопроса над полем автора. Может быть, вы хотите поддержать пользователей с текущими вопросами без ответов, используя свои потрясающие знания сегодня! Вы можете найти самые новые вопросы, введя имя тега в строку поиска, и вы увидите только вопросы по технологии, по которой хотите ответить. Для jQuery вы можете найти эту страницу здесь .
Herku
0

это лучше всего

html

<div id="here_table"> </div>

jQuery

$('#here_table').append( '<table>' );

for(i=0;i<3;i++)
{
$('#here_table').append( '<tr>' + 'result' +  i + '</tr>' );

    for(ii=0;ii<3;ii++)
    {
    $('#here_table').append( '<td>' + 'result' +  i + '</tr>' );
    }
}

$('#here_table').append(  '</table>' );
Рёсукэ Худзисава
источник
0

Важно отметить, что вы можете использовать Emmet для достижения того же результата. Сначала проверьте, что Эммет может для вас сделать на https://emmet.io/.

Вкратце, с помощью Emmet вы можете преобразовать строку в сложную разметку HTML, как показано в примерах ниже:

Пример # 1

ul>li*5

... произведет

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Пример # 2

div#header+div.page+div#footer.class1.class2.class3

... произведет

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

И список можно продолжить. Больше примеров можно найти на https://docs.emmet.io/abbreviations/syntax/

И есть библиотека для этого с помощью jQuery. Он называется Emmet.js и доступен по адресу https://github.com/christiansandor/Emmet.js.

асиби
источник