Javascript 未捕获类型错误：无法读取属性'；类名'；未定义数据表的定义

我有一张桌子：

HTML

<table id="mydata">
    <thead>
        <tr>
            <th>Data 1</th>
            <th>Data 2</th>
            <th>Data 3</th>
            <th>Data 4</th>
        </tr>
    </thead>
    <tbody>
        <tr class="main">
            <td class="data_1">A</td>
            <td class="data_2">B</td>
            <td class="data_3">C</td>
            <td class="data_4">D</td>
        </tr>
   </tbody>
</table>

<table id="mydata">
    <thead>
        <tr>
            <th>Data 1</th>
            <th>Data 2</th>
            <th>Data 3</th>
            <th>Data 4</th>
        </tr>
    </thead>
    <tbody>
        <tr class="main">
            <td class="data_1">A</td>
            <td class="data_2">B</td>
            <td class="data_3">C</td>
            <td class="data_4">D</td>
        </tr>

        <tr class="detail-header">
            <td><strong>A1</strong></td>
            <td><strong>B1</strong></td>
            <td><strong>C1</strong></td>
            <td><strong>D1</strong></td>
        </tr>
        <tr class="detail">
            <td><strong>A2</strong></td>
            <td><strong>B2</strong></td>
            <td><strong>C2</strong></td>
            <td><strong>D2</strong></td>
        </tr>
        <tr class="control">
            <td colspan="2"><a href="#">Show details</a></td>
            <td colspan="2"><a href="#">Hide details</a></td>
        </tr>
    </tbody>
</table>

成功了

但是，当我为main添加子行时：

HTML

<table id="mydata">
    <thead>
        <tr>
            <th>Data 1</th>
            <th>Data 2</th>
            <th>Data 3</th>
            <th>Data 4</th>
        </tr>
    </thead>
    <tbody>
        <tr class="main">
            <td class="data_1">A</td>
            <td class="data_2">B</td>
            <td class="data_3">C</td>
            <td class="data_4">D</td>
        </tr>
   </tbody>
</table>

<table id="mydata">
    <thead>
        <tr>
            <th>Data 1</th>
            <th>Data 2</th>
            <th>Data 3</th>
            <th>Data 4</th>
        </tr>
    </thead>
    <tbody>
        <tr class="main">
            <td class="data_1">A</td>
            <td class="data_2">B</td>
            <td class="data_3">C</td>
            <td class="data_4">D</td>
        </tr>

        <tr class="detail-header">
            <td><strong>A1</strong></td>
            <td><strong>B1</strong></td>
            <td><strong>C1</strong></td>
            <td><strong>D1</strong></td>
        </tr>
        <tr class="detail">
            <td><strong>A2</strong></td>
            <td><strong>B2</strong></td>
            <td><strong>C2</strong></td>
            <td><strong>D2</strong></td>
        </tr>
        <tr class="control">
            <td colspan="2"><a href="#">Show details</a></td>
            <td colspan="2"><a href="#">Hide details</a></td>
        </tr>
    </tbody>
</table>

数据表确实如此。将最后一行（带链接的行）放在

中：

<tfoot>
    <tr class="control">
        <td colspan="2"><a href="#">Show details</a></td>
        <td colspan="2"><a href="#">Hide details</a></td>
    </tr>
</tfoot>  

演示->数据表可以。将最后一行（带链接的行）放在

中：

<tfoot>
    <tr class="control">
        <td colspan="2"><a href="#">Show details</a></td>
        <td colspan="2"><a href="#">Hide details</a></td>
    </tr>
</tfoot>  

---

demo->

详细信息标题、详细信息和控件不是main的子项，它们是main的子项。你以为身体是主要的吗？是的，我很困惑。我希望datatable只使用main进行排序，而detail header、detail和control将取决于排序结果。你需要检查数据表插件，如果它允许排序任何特定的行！！！细节标题、细节和控件不是main的子项，它们是main的子项。你以为身体是主要的吗？是的，我很困惑。我希望datatable只使用main进行排序，而detail header、detail和control将取决于排序结果。你需要检查数据表插件，如果它允许排序任何特定的行！！！