Как создать новую таблицу со строками, используя jquery, и обернуть ее внутри div - PullRequest
Новая
       14

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

10 голосов
/ 12 сентября 2009

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

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

<div id='div1'> </div>

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

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

Ответы [ 5 ]

30 голосов
/ 12 сентября 2009

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

$('<table><tr><td>.....</td></tr></table>').appendTo( '#div1' );

или 

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

var html = '<table><thead><tr>...</tr></thead><tbody>';
for (var i = 0, len = data.length; i < len; ++i) {
    html += '<tr>';
    for (var j = 0, rowLen = data[i].length; j < rowLen; ++j ) {
        html += '<td>' + data[i][j] + '</td>';
    }
    html += "</tr>";
}
html += '</tbody><tfoot><tr>....</tr></tfoot></table>';

$(html).appendTo('#div1');
3 голосов
/ 12 сентября 2009

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

// $(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(
        "<table><tr><td>My column 1, row 1</td>" +
        "<td>My column 2, row 2</td></tr>" +
        "<tr><td>My column 1, row 2</td>" +
        "<td>My column 2, row 2</td></tr></table>");
});

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

$(document).ready(function() {
    $("#div1").append("<table id=\"my_table1\"></table>");
    $("#my_table1").append("<tr><td>Row 1</td></tr>");
    ... insert more rows here ...
    $("#my_table1").append("<tr><td>Row ...</td></tr>");
});

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

0 голосов
/ 06 января 2018

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

        var obj = JSON.parse(msg);
        var tableString ="<table id='tbla'>";
        tableString +="<tr><th>Name<th>City<th>Birthday</tr>";


        for (var i=0; i<obj.length; i++){
        tableString +=gg_stringformat("<tr><td>{0}<td>{1}<td>{2}</tr>",obj[i].name, obj[i].city, obj[i].birthday);
        }
        tableString +="</table>";
        $('#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;
}
0 голосов
/ 06 мая 2015

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

    <html>
    <head>
    <body>
    <div id="container">
    <div id="row0" class="row">
    <div id="col0" class="column">
    <div id="col1" class="column">
    <div id="col2" class="column">
    </div>
    <div id="row1" class="row">
    <div id="col0" class="column"></div>
    <div id="col1" class="column"></div>
    <div id="col2" class="column"></div>
    </div>
    <div id="row2" class="row">
    <div id="col0" class="column"></div>
    <div id="col1" class="column"></div>
    <div id="col2" class="column"></div>
    </div>
    </div>
    </body>
    </html>

Это код jquery 

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

    for(i=0;i<=2;i++){
        row='<div id=\"row'+i+'\" class=\"row\"></div>';
        $("#container").append(row);
        for(j=0;j<=2;j++){
            col='<div id=\"col'+j+'\" class=\"column\"></div>';
            $("#row"+i).append(col);
            $("#col"+j).append(flipper);
        }
    }       
    });
0 голосов
/ 12 сентября 2009 
var newContent = $('<your html="here"/>');
var insertLocation = $('#div1');
insertLocation.append(newContent);
...