jquery中的备用行表

时间:2010-08-24 10:53:58

标签: javascript jquery

如何在jquery / javascript中创建下面提到的表结构:

  <table>
    <tr>
        <td>
            one
        </td>
        <td>
            two
        </td>
        <td>
            three
        </td>
    </tr>
    <tr>
        <td>
           single
        </td>

    </tr>
      <tr>
        <td>
            one
        </td>
        <td>
            two
        </td>
        <td>
            three
        </td>
    </tr>
     <tr>
        <td>
           single
        </td>

    </tr>
</table>

即。备用行有3/1列。

1 个答案:

答案 0 :(得分:1)

这应该足够了:

$(document).ready(function(){
    var $myTable = $("<table></table>");
    var $myRow;
    var rowCount = 10; //or whatever you want
    var cellCount = 1;
    var i = 0;
    for (i=0; i<rowCount; i++){
        $myRow = $("<tr></tr>");
        cellCount = (i%2 === 0)? 3 : 1;

        for (var j=0; j<cellCount; j++){
           $myRow.append("<td>a</td>") 
        }

        $myTable.append($myRow);
    }

    $("body").append($myTable); //if you want to add it to your document.
});​

查看JSFiddle:http://jsfiddle.net/ZbJ3v/

这当然不会添加你的“一个”“两个”等等(我只是用'a'来表示结构)但我从你的问题中假设你只是想要结构。

编辑以下评论。循环块看起来像:

    for (i=0; i<rowCount; i++){
        $myRow = $("<tr></tr>");
        if (i%2 === 0){
           $myRow.append("<td>aa.bb</td>") 
           $myRow.append("<td>aa.cc</td>") 
           $myRow.append("<td>aa.dd</td>") 
        }else{
           $myRow.append("<td>xx</td>") 
        }

        $myTable.append($myRow);
    }

对此jsfiddle:http://jsfiddle.net/WPJ5q/

有帮助