无法将 HTML 转换为 Javascript 变量

Question

我试图在主数据表中嵌套一个 jQuery 数据表。我能够创建子 table 并填充它，但是当我尝试将 HTML 复制到显示嵌套行的 JavaScript 函数时，我收到一个错误，因为 HTML 有换行符、额外的空格并且没有用引号引起来。

我怎样才能让它工作？

<link rel="stylesheet" type="text/css" href="/css/dataTables.jqueryui.css" />

<script type="text/javascript" charset="utf8" src="/scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="/Scripts/dataTables.jqueryui.js"></script>
<script type="text/javascript" charset="utf8" src="/scripts/tinymce/tiny_mce.js"></script>


<style type="text/css">
    #ethicsOpinions_wrapper select {
        width: auto;
    }

    .ui-dialog-content.ui-widget-content {
        padding: 10px 30px 10px 15px;
    }


    td.details-control {
        background: url('/images/details_open.png') no-repeat center center;
        cursor: pointer;
    }
    tr.shown td.details-control {
        background: url('/images/details_close.png') no-repeat center center;
    }
</style>

<script type="text/javascript">
    var ethicalRulesTableHtml;

    $(function () {
        ethicalRulesTableHtml = $("#ethicalRulesGrid").html();

        var table = $('#ethicalRulesSections').DataTable({
            "ajax": "/umbraco/surface/RulesSurface/getRulesSections",
            "order": [[1, 'asc']],
            stateSave: false,
            "paging": false,
            "autoWidth": true,
            "processing": true,
            "jQueryUI": true,
            "destroy": true,
            "deferRender": true,
            "filter": false,
            "dom": '<lfr>t<"F"p>',
            "columns": [
                {
                    "data": null,
                    className: "dt-center details-control",
                    "defaultContent": "",
                    "width": "20px",
                    "orderable": false
                },
                {
                    "data": 0,
                    "visible": false
                },
                {
                    "data": 1,
                    "width": "50px",
                    className: "dt-center"
                },
                {
                    "data": 2
                }
            ]
        });

        // Add event listener for opening and closing details
        $('#ethicalRulesSections tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child("'" + format(row.data()) + "'").show();
                tr.addClass('shown');
            }
        });

    });

    function format(d) {
        $('#ethicalRules').DataTable({
            "ajax": "/umbraco/surface/RulesSurface/getRules/" + d[0],
            "order": [[1, 'asc']],
            "width": "630px",
            stateSave: false,
            "paging": false,
            "autoWidth": true,
            "processing": true,
            "jQueryUI": true,
            "destroy": true,
            "deferRender": true,
            "filter": false,
            "dom": '<lfr>t<"F"p>',
            "columns": [
                {
                    "data": 1,
                    "visible": false
                },
                {
                    "data": 2,
                    "width": "50px",
                    className: "dt-center"
                },
                {
                    "data": 3
                }
            ],
            "initComplete": function (settings, json) { return $('#ethicalRules')[0].outerHTML; }
        });
    }
</script>


<div id="ethicalRulesSectionsGrid">
    <table id="ethicalRulesSections" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th>Section Number</th>
                <th>Section</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>



<div id="ethicalRulesGrid">
    <table id="ethicalRules" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row" style="margin:0 0 0 110px;">
        <thead>
            <tr>
                <th></th>
                <th>Rule Number</th>
                <th>Rule</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

Answer 1

基本上解决方案是克隆您的 child table HTML 模板，使用克隆元素的 HTML 内容添加新的 child 行，找到添加的 table 并基于它创建一个 DataTables object。

您需要从 child table 中删除 id 属性，如下所示，并使其容器最初隐藏。

HTML

我省略了你的一些HTML代码，下面只显示child table。

<div id="ethicalRulesGrid" style="display:none">
   <table cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row" style="margin:0 0 0 110px;">
      <thead>
            <tr>
               <th></th>
               <th>Rule Number</th>
               <th>Rule</th>
            </tr>
      </thead>
      <tbody></tbody>
   </table>
</div>

JavaScript

var ethicalRulesTableHtml;

$(function () {
    ethicalRulesTableHtml = $("#ethicalRulesGrid").html();

    var table = $('#ethicalRulesSections').DataTable({
        "ajax": "/umbraco/surface/RulesSurface/getRulesSections",
        "order": [[1, 'asc']],
        stateSave: false,
        "paging": false,
        "autoWidth": true,
        "processing": true,
        "jQueryUI": true,
        "destroy": true,
        "deferRender": true,
        "filter": false,
        "dom": '<lfr>t<"F"p>',
        "columns": [
            {
                "data": null,
                className: "dt-center details-control",
                "defaultContent": "",
                "width": "20px",
                "orderable": false
            },
            {
                "data": 0,
                "visible": false
            },
            {
                "data": 1,
                "width": "50px",
                className: "dt-center"
            },
            {
                "data": 2
            }
        ]
    });

    // Add event listener for opening and closing details
    $('#ethicalRulesSections tbody').on('click', 'td.details-control', function () {
       var tr = $(this).closest('tr');
       var row = table.row(tr);

       if (row.child.isShown()) {
          // Destroy child table
          tr.next().find('table').DataTable().destroy();

          // This row is already open - close it
          row.child.remove();
          tr.removeClass('shown');
       }
       else {
          // Open this row
          format(table, tr);
       }
    });
});

function format(table, tr) {
    var row = table.row(tr);
    var d = row.data();

    tr.addClass('shown');

    // Clone child table and insert it as child row
    row.child($('#ethicalRulesGrid').clone().html()).show();

    // Locate child table
    var $child_table = tr.next().find('table');

    // Initialize child table
    $child_table.DataTable({
       "ajax": "/umbraco/surface/RulesSurface/getRules/" + d[0],
       "order": [[1, 'asc']],
       "width": "630px",
       "stateSave": false,
       "paging": false,
       "autoWidth": true,
       "processing": true,
       "jQueryUI": true,
       "destroy": true,
       "deferRender": true,
       "filter": false,
       "dom": '<lfr>t<"F"p>',
       "columns": [
             {
                "data": 1,
                "visible": false
             },
             {
                "data": 2,
                "width": "50px",
                className: "dt-center"
             },
             {
                "data": 3
             }
       ]
    });
}

无法将 HTML 转换为 Javascript 变量

Unable to convert HTML to Javascript Variable

html

javascript

jquery

datatables

jquery-datatables