无法将HTML转换为Javascript变量

我正在尝试将jQuery数据表嵌套到主数据表中。我可以创建子表并填充它，但是当我尝试将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>

#伦理观点包装选择{
宽度：自动；
}
.ui-dialog-content.ui-widget-content{
填充：10px 30px 10px 15px；
}
td.1电子控制{
背景：url（'/images/details_open.png'）无重复中心；
光标：指针；
}
tr.所示td.详细信息-控制{
背景：url（'/images/details_close.png'）无重复中心；
}
var ethicalRulesTableHtml；
$（函数（）{
ethicalRulesTableHtml=$（“#ethicalRulesGrid”）.html（）；
变量表=$（“#ethicalRulesSections”）。数据表({
“ajax”：“/umbraco/surface/rulesssurface/getRulesSections”，
“订单”：[[1，‘asc']]，
stateSave:false，
“分页”：false，
“自动宽度”：正确，
“处理”：对，
“jQueryUI”：没错，
“毁灭”：真的，
“延迟渲染”：正确，
“过滤器”：false，
“dom”：“t”，
“栏目”：[
{
“数据”：空，
类名：“dt中心详细信息控制”，
“defaultContent”：“，
“宽度”：“20px”，
“可订购”：false
},
{
“数据”：0，
“可见”：错误
},
{
“数据”：1，
“宽度”：“50px”，
类名：“dt中心”
},
{
“数据”：2
}
]
});
//为打开和关闭详细信息添加事件侦听器
$（#ethicalRulesSections tbody'）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}
否则{
//打开这一排
row.child（“”+格式（row.data（））+“”）.show（）；
tr.addClass（“显示”）；
}
});
});
函数格式（d）{
$（'ethicalRules'）。数据表({
“ajax”：“/umbraco/surface/rulesssurface/getRules/”+d[0]，
“订单”：[[1，‘asc']]，
“宽度”：“630px”，
stateSave:false，
“分页”：false，
“自动宽度”：正确，
“处理”：对，
“jQueryUI”：没错，
“毁灭”：真的，
“延迟渲染”：正确，
“过滤器”：false，
“dom”：“t”，
“栏目”：[
{
“数据”：1，
“可见”：错误
},
{
“数据”：2，
“宽度”：“50px”，
类名：“dt中心”
},
{
“数据”：3
}
],
“initComplete”：函数（设置，json）{return$（'#ethicalRules'）[0].outerHTML；}
});
}
章节号
部分
规则编号
统治

基本上，解决方案是克隆子表HTML模板，使用克隆元素的HTML内容添加一个新的子行，找到添加的表并基于此创建DataTables对象

您需要从子表中删除

id

属性，如下所示，并使其容器最初隐藏

HTML

我省略了一些HTML代码，下面显示了唯一的子表

规则编号
统治

JavaScript

var ethicalRulesTableHtml；
$（函数（）{
ethicalRulesTableHtml=$（“#ethicalRulesGrid”）.html（）；
变量表=$（“#ethicalRulesSections”）。数据表({
“ajax”：“/umbraco/surface/rulesssurface/getRulesSections”，
“订单”：[[1，‘asc']]，
stateSave:false，
“分页”：false，
“自动宽度”：正确，
“处理”：对，
“jQueryUI”：没错，
“毁灭”：真的，
“延迟渲染”：正确，
“过滤器”：false，
“dom”：“t”，
“栏目”：[
{
“数据”：空，
类名：“dt中心详细信息控制”，
“defaultContent”：“，
“宽度”：“20px”，
“可订购”：false
},
{
“数据”：0，
“可见”：错误
},
{
“数据”：1，
“宽度”：“50px”，
类名：“dt中心”
},
{
“数据”：2
}
]
});
//为打开和关闭详细信息添加事件侦听器
$（#ethicalRulesSections tbody'）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//销毁子表
tr.next（）.find（'table'）.DataTable（）.destroy（）；
//此行已打开-关闭它
row.child.remove（）；
tr.removeClass（“显示”）；
}
否则{
//打开这一排
格式（表格，tr）；
}
});
});
函数格式（表，tr）
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
             }
       ]
    });
}