javascript - 如何将 HTML 表 td 值放在同一行的新行中

Question

我有一个如下的html

<table class="ui-widget" id="lines">
<tbody>
    <tr>
        <th>Line Item Number</th>
        <th>Line Item Date</th>
        <th>Unit Cost</th>
        <th>Number of Units</th>
        <th>Line Item Total</th>
    </tr>

    <tr class="errortrue">
        <td>1</td>
        <td>20150301</td>
        <td>1</td>
        <td>1</td>
        <td>4</td>
        <td class="error">Line : 1 NULL Value is not in the defined list  for LINE ITEM TAX TYPE</td>
        <td class="error">Line : 1 INVOICE DATE is a required field</td>
        <td class="error">Line : 1 BILLING START DATE is a required field</td>
    </tr>
    <tr class="">
        <td>2</td>
        <td>20150304</td>
        <td>2</td>
        <td>2</td>
        <td>6</td>          
    </tr>
    <tr class="errortrue">
        <td>3</td>
        <td>20150306</td>
        <td>3</td>
        <td>3</td>
        <td>12</td>
        <td class="error">Line : 3 NULL Value is not in the defined list  for LINE ITEM TAX TYPE</td>
        <td class="error">Line : 3 MATTER NAME is a required field</td>
        <td class="error">Line : 3 BILLING END DATE is a required field</td>
    </tr>
</tbody>
</table>

这是jsfiddle ilnk http://jsfiddle.net/x681ef9r/

我正在尝试将所有 td 值(使用 class='error')放在同一行的新行中

|--------------------------------------------------------------------------------|
| Line#     |     Date      |   UnitCost    |   NumberofUnits   |     Total      |
|--------------------------------------------------------------------------------|
|1              20150301           1                1                  4         |
|Line : 1 NULL Value is not in the defined list for LINE ITEM TAX TYPE           |
|Line : 1 INVOICE DATE is a required field                                       |
|Line : 1 BILLING START DATE is a required field                                 |
|--------------------------------------------------------------------------------|
|2              20150304           2                2                  6         |
|--------------------------------------------------------------------------------|
|2              20150306           3                3                 12         |
|Line : 3 NULL Value is not in the defined list for LINE ITEM TAX TYPE           |
|Line : 3 MATTER NAME is a required field                                        |
|Line : 3 BILLING END DATE is a required field                                   |
----------------------------------------------------------------------------------

我尝试将 td 值与 class='error' 调整为 tr 但我没有得到我想要的。有人可以帮我解决这个问题吗？

Answer 1

您需要将它们放在自己的行中以让它们跨越表格，如下所示:

<table class="ui-widget" id="lines">
    <tbody>
        <tr>
            <th>Line Item Number</th>
            <th>Line Item Date</th>
            <th>Unit Cost</th>
            <th>Number of Units</th>
            <th>Line Item Total</th>
        </tr>

        <tr class="errortrue">
            <td>1</td>
            <td>20150301</td>
            <td>1</td>
            <td>1</td>
            <td>4</td>
        </tr>
        <tr>
            <td colspan="5" class="error">
                Line : 1 NULL Value is not in the defined list  for LINE ITEM TAX TYPE
                <br/>Line : 1 INVOICE DATE is a required field
                <br/>Line : 1 BILLING START DATE is a required field
            </td>
        </tr>
        <tr class="">
            <td>2</td>
            <td>20150304</td>
            <td>2</td>
            <td>2</td>
            <td>6</td>
        </tr>
        <tr class="errortrue">
            <td>3</td>
            <td>20150306</td>
            <td>3</td>
            <td>3</td>
            <td>12</td>
        </tr>
        <tr>
            <td colspan="5" class="error">
                Line : 1 NULL Value is not in the defined list  for LINE ITEM TAX TYPE
                <br/>Line : 1 INVOICE DATE is a required field
                <br/>Line : 1 BILLING START DATE is a required field
            </td>
        </tr>
    </tbody>
</table>

参见 this updated fiddle