Question

我尝试使用jQuery创建网格表。因此，请将这些元素添加到html页面中：

<div id="grid" class="gridTable">
    <div class="row">
        <span class="cell head"></span>
        <span class="cell head"></span>
        <span class="cell head"></span>
    </div>
    <div class="row">
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
    </div>
    <div class="row">
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
    </div>
    <div class="row">
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
    </div>
</div>

我想只添加网格容器：

<div id="grid" class="gridTable"><div>

并在此容器内部使用jQuery append()或其他方法动态添加我的行：

<div class="row">
    <span class="cell head"></span>
    <span class="cell head"></span>
    <span class="cell head"></span>
</div>

每次我都想重复。我尝试过类似的东西：

$('.gridTable').append( $("<div></div>").addClass('row') );

但我不知道如何添加附加元素的.cell子项。

请参阅 fiddle:

中的完整HTML代码

Answer 1

您可以创建一个函数，该函数返回具有指定数量单元格的行对象，并为每行调用它：

提示

根据需要调整功能（例如，它可以采用单元格类的参数）

＆＃13;
＆＃13;
var grid = $('#grid'); /** * Returns a jQuery object of a row * param cells {number} The number of cells */ function getRow(cells, customClass) { var c = ''; for (var i=0;i<cells;i++) { c += '<span class="cell ' + customClass + '">Cell</span>'; } var row = $('<div class="row">' + c + '</div>'); return row; } // Add 5 rows var rows = 5; for (var r=1;r<=rows;r++) { var customClass = (r == 1) ? 'head' : ''; grid.append(getRow(3, customClass)); }
＆＃13;
.cell { display:inline-block; padding:5px 10px; border:1px solid #d8d8d8; } .head { font-weight:bold }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div id="grid" class="gridTable"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

将附加元素存储在变量中，并在追加后使用它。要完成这项工作，您需要在选择器中编写新元素，并使用.appendTo()附加元素。

＆＃13;

var row = $('<div></div>').addClass("row").appendTo(".gridTable");
row.append("<span class='cell head'>col</span");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid" class="gridTable"></div>

＆＃13;

如果要创建动态表的所有行和列，请参阅底部代码。

＆＃13;

for (var i = 0; i < 4; i++){
    var row = $('<div></div>').addClass("row").appendTo(".gridTable");
    for (var j = 0; j < 3; j++){
        if (i == 0)
    	    row.append("<span class='cell head'>head</span");
        else
            row.append("<span class='cell'>col</span");
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid" class="gridTable"></div>

＆＃13;

使用jQuery追加带子节点和类的元素

2 个答案: