为什么我的带有可折叠行的嵌套表显示不正确？答案

【问题标题】：Why my nested table with collapsible rows is not displaying correctly?为什么我的带有可折叠行的嵌套表显示不正确？
【发布时间】：2020-10-28 20:15:39
【问题描述】：

我正在尝试实现一个带有可折叠行的嵌套表，但它显示不正确。这是我的 JavaScript：

<script>
function fnFormatDetails(table_id, html) {
    var sOut = "<table id=\"exampleTable_" + table_id + "\">";
    sOut += html;
    sOut += "</table>";
    return sOut;
}
var iTableCounter = 1;
var oTable;
var oInnerTable;
var TableHtml;

$(document).ready(function() {
    TableHtml = $("#exampleTable").html();            
    var nCloneTh = document.createElement('th');
    var nCloneTd = document.createElement('td');
    nCloneTd.innerHTML = '<img src="http://i.imgur.com/SD7Dz.png">';
    nCloneTd.className = "center";
    $('#exampleTable thead tr').each(function() {
        this.insertBefore(nCloneTh, this.childNodes[0]);
    });
    $('#exampleTable tbody tr').each(function() {
        this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
    });            
    var oTable = $('#exampleTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aoColumnDefs": [{
            "bSortable": false,
            "aTargets": [0]
        }],
        "aaSorting": [
            [1, 'asc']
        ]
    });
    $('#exampleTable tbody td img').live('click', function() {
        var nTr = $(this).parents('tr')[0];
        if (oTable.fnIsOpen(nTr)) {                   
            this.src = "http://i.imgur.com/SD7Dz.png";
            oTable.fnClose(nTr);
        } else {                   
            this.src = "http://i.imgur.com/d4ICC.png";
            oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details');
            oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"
            });
            iTableCounter = iTableCounter + 1;
        }
    });
});
</script>

这是我要显示的 HTML 表格：

<table id="exampleTable">
    <thead>
        <tr>
            <th>Year</th>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2012</td>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>2012</td>
            <td>February</td>
            <td>$80</td>
        </tr>
        <tr>
            <td>2012</td>
            <td>March</td>
            <td>$80</td>
        </tr>                        
    </tbody>
</table>

我用于脚本和样式的链接：

    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>

它根本不显示任何表格，只显示行中的纯文本。知道这里有什么问题吗？

附：我正在使用来自这个 jsFiddle 的代码：http://jsfiddle.net/DoDSoftware/WwDg8/820/

【问题讨论】：

标签： javascript html ajax datatable

【解决方案1】：

您应该首先将主要引用放在 jquery 脚本上。您的代码中缺少此内容。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

那么您的表格将显示为正确格式。

接下来，您有一个图片点击错误。将 .live() 函数转换为 .on() 函数，因为 .live() 已从 jquery 1.9 及更高版本中删除。

        $('#exampleTable').on('click', 'tbody td img', function() {

这里是完整的代码，在 Firefox 78.0.1 中没有错误

<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
</head>
<body>

<table id="exampleTable">
                <thead>
                    <tr>
                        <th>Year</th>
                        <th>Month</th>
                        <th>Savings</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2012</td>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>2012</td>
                        <td>February</td>
                        <td>$80</td>
                    </tr>
                    <tr>
                        <td>2012</td>
                        <td>March</td>
                        <td>$80</td>
                    </tr>                        
                </tbody>
            </table>

<script>
    function fnFormatDetails(table_id, html) {
        var sOut = "<table id=\"exampleTable_" + table_id + "\">";
        sOut += html;
        sOut += "</table>";
        return sOut;
    }
    var iTableCounter = 1;
    var oTable;
    var oInnerTable;
    var TableHtml;
   
    $(document).ready(function() {
        TableHtml = $("#exampleTable").html();            
        var nCloneTh = document.createElement('th');
        var nCloneTd = document.createElement('td');
        nCloneTd.innerHTML = '<img src="http://i.imgur.com/SD7Dz.png">';
        nCloneTd.className = "center";
        $('#exampleTable thead tr').each(function() {
            this.insertBefore(nCloneTh, this.childNodes[0]);
        });
        $('#exampleTable tbody tr').each(function() {
            this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
        });            
        var oTable = $('#exampleTable').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": [0]
            }],
            "aaSorting": [
                [1, 'asc']
            ]
        });
        //$('#exampleTable tbody td img').live('click', function() {
        $('#exampleTable').on('click', 'tbody td img', function() {
            var nTr = $(this).parents('tr')[0];
            if (oTable.fnIsOpen(nTr)) {                   
                this.src = "http://i.imgur.com/SD7Dz.png";
                oTable.fnClose(nTr);
            } else {                   
                this.src = "http://i.imgur.com/d4ICC.png";
                oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details');
                oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers"
                });
                iTableCounter = iTableCounter + 1;
            }
        });
    });
</script>
</body>
</html>

【讨论】：

还是一样的问题
看起来更糟，我认为您的代码中缺少某些内容。尝试将整个代码上传到 jsffidle
我将 http 引用更改为 https，看看现在是否适合您。
我怎样才能真正拥有只有一个值的行（例如名称），并在展开后显示有关该名称的更多信息？我该如何实现呢？
试试这个：jsfiddle.net/baumli/mkhpeLow 您需要创建一个新表，然后在展开代码中引用它。这仅显示 1 个表格，但您需要为要扩展的每条记录创建一个。