通过jquery向表添加元素

时间:2012-06-27 02:23:06

标签: jquery

我有一张表有一行。我想使用jquery将脚添加到具有脚本可能条件的行中。这是我的示例代码:

<script type="text/javascript" language="javascript">
  function loadContent() {
    var $parent = $("#productlist").empty(); //empty div
    $parent.append('<br /><table id="myTable" cellpadding="0" cellspacing="0" width="100%" class="productlist" style="margin-left:4px; padding-top:2px;"><tbody></tbody></table>');
    if (k % 3 == 0 && k == 0) {
        var $table = $parent.find("#myTable > tbody");
        var htmlRow = [
                      '<tr align="center">',
                      '<td align="center" id="colunm-product">',
                       //some data
                       '</td>'];
        $table.append(htmlRow.join(''));
    } else if ((k % 3 == 0) && (k != 0)) {
       //add more <td>
    } else {
       //close </tr>
    }
</script>

我可以创建<tr>并添加更多<td>,在可能的情况下,我会追加</tr>吗?

有任何意见吗?

2 个答案:

答案 0 :(得分:1)

您应该将该行构造为jQuery对象,然后根据需要添加其他<td>

然后最后将该行附加到表格中。

if (k % 3 == 0) {
  var $table = $parent.find("#myTable > tbody");
  // htmlRow as jQuery object.
  var htmlRow = $([
    '<tr align="center">',
       '<td align="center" id="colunm-product">',
           //some data
       '</td>',
    '</tr>'].join('')
   );

  if(k != 0) {
    htmlRow.append([
       '<td>',
        // More Data
       '</td>'
       ].join(''));
  }

  // Add completed row here
  $table.append(htmlRow);
}

答案 1 :(得分:1)

var htmlRow = [];
if (k % 3 == 0 && k == 0) {
    var $table = $parent.find("#myTable > tbody");
   htmlRow.push(
       '<tr align="center">',
       '<td align="center" id="colunm-product">some data</td>');
    } else if ((k % 3 == 0) && (k != 0)) {
        htmlRow.push('<td align="center" id="colunm-product-2">Data 1</td>',
                     '<td align="center" id="colunm-product-3">Data 2</td>',
                     '<td align="center" id="colunm-product-2">Data 3</td>');
    } else {
        htmlRow.push('</tr>');
        $table.append(htmlRow.join(''));
    }

或者你串联连接

var htmlRow = '';
if (k % 3 == 0 && k == 0) {
    var $table = $parent.find("#myTable > tbody");
    htmlRow += '<tr align="center">'+
                '<td align="center" id="colunm-product">some data</td>';
} else if ((k % 3 == 0) && (k != 0)) {
    htmlRow +=
        '<td align="center" id="colunm-product-2">Data 1</td>'+
        '<td align="center" id="colunm-product-3">Data 2</td>'+
        '<td align="center" id="colunm-product-2">Data 3</td>';
} else {
    htmlRow += '</tr>';
    $table.append(htmlRow);
}

<强> Working sample