Question

我试图创建一张包含X X X的3张牌的桌子我无法添加任何行或列所有都需要动态，所以身体是空的：

<script>
    var $card = $('<div />').appendTo('body');
    var $table = document.createElement("table");
    var $image = document.createElement("IMG");
    $('#table').find('body').append("<tr>");
    $('#table').find('body').append("<td>" + $image.src + "</td>");
    $('#table').find('body').append("<td>" + $image.src + "</td>");
    $('#table').find('body').append("<td>" + $image.src + "</td>");
    $('#card').html($table);
    $card.append($table);
    for (var i = 0; i < 3; i++) {
        $image.src = "/images/ACE.jpg";
        $('#card').html($image);
        $card.append($image);
    }
</script>

Answer 1

如果要在DOM中生成元素，则必须将它们附加到它们应该是子元素的元素中。这是创建元素并将其附加到父元素的基本示例。这应该可以让您了解逻辑如何工作。

＆＃13;

var $body = $(document.body);

//make a table
var $table = $('<table>');
//make a row
var $row = $('<tr>');
//make a column
var $col = $('<td>');
//put something in the column
$col.append('Hey there!');
//put the column in the row
$row.append($col);
//put the row in the table
$table.append($row);
//put the table in the body
$body.append($table);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

或者，您可以先将标记构建为字符串，然后再添加它。

＆＃13;

var $body = $(document.body);
var html = '';

//make a table
html += '<table>';
//make a row
html += '<tr>';
//make a column
html += '<td>';
//put something in the column
html += 'Hey there!';
//close the column
html += '</td>';
//close the row
html += '</tr>';
//close the table
html += '</table>';
//put the table in the body
$body.append(html);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

您正在创建无效的HTML。您还可以将不完整的JavaScript代码与jQuery混合使用。将表添加到body，然后向表中添加tr行，然后向该行添加三个td单元格。你的图像应该进入细胞。这是一个简单的代码：

＆＃13;

var img = '<img src="/images/ACE.jpg" />';
var table = $('<table id="table1"></table>').appendTo('body');
table.append("<tr></tr>");
table.find('tr').append("<td>" + img + "</td>"
                      + "<td>" + img + "</td>"
                      + "<td>" + img + "</td>");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

动态创建表并添加图像

2 个答案: