Вопрос по html-table, jquery, html – Как создать новую таблицу со строками, используя jquery, и обернуть ее внутри div

10

Я хотел бы создать таблицу внутри элемента div

В моем файле .html у меня есть это

 

В моем js-файле я хочу разместить новую таблицу со строками и данными

Как я могу это реализовать?

Ваш Ответ

5   ответов
-1
var newContent = $('');
var insertLocation = $('#div1');
insertLocation.append(newContent);
30

Предполагая, что у вас есть HTML-код для таблицы, вы можете просто создать из него объект jQuery и добавить его в DIV. Если у вас есть данные, вы 'Вам нужно будет перебрать его, создать ячейки / строки из данных и добавить их независимо.

$('
.....
').appendTo( '#div1' );

или же

var data = [ [ 1, 2, 3 ], [ 4, 5, 6 ], [7, 8, 9 ] ];

var html = '...';
for (var i = 0, len = data.length; i < len; ++i) {
    html += '';
    for (var j = 0, rowLen = data[i].length; j < rowLen; ++j ) {
        html += '';
    }
    html += "";
}
html += '....
' + data[i][j] + '
'; $(html).appendTo('#div1');
0

HTML, имеющий такую структуру:

    
    
    
    

Это код jquery

    $(document).ready(function(){
    var row,col,rowid,colid;

    for(i=0;i<=2;i++){
        row='
'; $("#container").append(row); for(j=0;j<=2;j++){ col='
'; $("#row"+i).append(col); $("#col"+j).append(flipper); } } });
3

Есть много разных способов, которыми вы могли бы пойти с этим. Один из способов сделать что-то вроде этого:

// $(document).ready() makes sure that nothing happens until the page
// is fully loaded. It's important because the div may not have loaded
// yet if you put code outside of this
$(document).ready( function() {
    $("#div1").append(
        "" +
        "" +
        "" +
        "
My column 1, row 1My column 2, row 2
My column 1, row 2My column 2, row 2
"); });

Это поместит полную таблицу в ваш div, проанализированный как HTML. Другой способ, если вы хотите добавить каждую строку отдельно, будет:

$(document).ready(function() {
    $("#div1").append("
"); $("#my_table1").append("Row 1"); ... insert more rows here ... $("#my_table1").append("Row ..."); });

Это'Важно понимать, что.append() поместит введенный вами HTML или текствнутри любого элемента, который вы выбрали с помощью селектора знака доллара ()$("selector text")

0

Например, вы получили данные JASON от сервера.

        var obj = JSON.parse(msg);
        var tableString ="";
        tableString +="";


        for (var i=0; i",obj[i].name, obj[i].city, obj[i].birthday);
        }
        tableString +="
NameCityBirthday
{0}{1}{2}
"; $('#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;
}

Похожие вопросы