相关疑难解决方法(0)

我正在编制一个列出交易(贷记和借方)的帐户页面.我希望用户能够点击表格行并展开更多信息.

我正在使用twitter bootstrap并查看了文档,这是我的结果

<table class="table table-striped" id="account-table">
<thead>
    <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Balance</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class="">
        <td>1</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">$150.00</td>
        <td class="text-error"></td>
        <td class="text-success">$150.00</td>
        <div id="demo1" class="demo out collapse">Demo1</div>
    </tr>

见:http: //jsfiddle.net/2Dj7Y/

唯一的问题是它在错误的地方显示"下拉信息",我想添加一个新行,而不是在表格的顶部打印

我也尝试添加一个新的表行(只显示行,没有崩溃操作(仅适用于第一行)

 <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" >
            <td>1</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">$150.00</td>
            <td class="text-error"></td>
            <td class="text-success">$150.00</td>
             <tr id="demo1" class="demo out collapse"> 
                    <td>1</td>
                    <td>05 May 2013</td>
                    <td>Credit Account</td>
                    <td class="text-success">$150.00</td>
                    <td class="text-error"></td>
                    <td …

我想稍微修改bootstrap,以便我的条纹行就是这样.

第1行和第2行共享相同的行背景颜色,第3行和第4行共享相同的背景颜色,第5行和第6行共享与第1行和第2行相同的背景颜色.是否存在快速入侵/技巧这种？

这是我到目前为止的代码.

<table class="table table-striped table-sm">
    <thead class="thead-default">
    <tr>
        <td>Column 1</td><td>Column 2</td>
    </tr>
    </thead>
    <tbody>
        <template ngFor let-loop [ngForOf]="model | async">
            <tr>
                <td>Column Data</td><td>Column Data</td>
            </tr>
            <tr>
                <td>Column Data</td><td>Column Data</td>
            </tr>
        </template>
    </tbody>
</table>