使用 dataTable 并指定 th 或 td 列答案

【问题标题】：Using dataTable and specify th or td columns使用 dataTable 并指定 th 或 td 列
【发布时间】：2014-02-28 09:50:30
【问题描述】：

我正在使用 Filament Group, Inc. 的 jQuery-Visualize，它生成由 HTML 表格元素驱动的 HTML5 画布图表。

此插件的一个要求是，当使用多维表时，tad 行 tr 中的第一个 th 需要是 td。

我显示了一个图表，但我有一个问题，它发生了变化：

Javacript 代码：

function fillDataTable(data) {

if ($("#table_campaigns").css("visibility") == "hidden")
    $("#table_campaigns").css("visibility", "visible");

$('#table_campaigns').dataTable({
    'aaData': data,
    'aoColumns': [
        { "sTitle": "" },
        { "sTitle": "2010" },
        { "sTitle": "2011" },
    { "sTitle": "2012" },
    { "sTitle": "2013" },
    { "sTitle": "2014" }
    ],
    "iDisplayLength": 10,
    "bJQueryUI": true,
    "bDestroy": true,
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false
});
}

当我删除 { "sTitle": "" } 时，我有这个：

我认为我用于图表的 javascript puglin 使 td 和 th 标记有所不同。因为在我的 aspx 页面中，我有它并且效果很好：

<script type="text/javascript">
        $(function(){
            $('table').visualize({type: 'line'}).appendTo('body');
        });
    </script>
</head>
<body>
    <table>
        <caption>2009 Employee Sales by Department</caption>
        <thead>
            <tr>
                <td></td>
                <th scope="col">2010</th>
                <th scope="col">2011</th>
                <th scope="col">2012</th>
                <th scope="col">2013</th>
                <th scope="col">2014</th>
            </tr>
        </thead>
                      ...

你可以看到我在 thead 和 th 标签之后都有第一个 td 标签。

现在我想在我的 html 页面中执行此操作：

</head>
<body>
<table id="table_campaigns" class="display">
    <caption style="font-size:20px">Statistiek 2 : per productgroep</caption>
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
</body>
</html>

我必须在我的数据表中指定 {"sTitle": ""} 必须是 td？怎么做？有没有其他解决方案？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我解决了这个问题，必须尊重可视化插件在html中的特殊结构。

可以看到here的信息

我在我的 JavaScript 中添加了：

$('tr th:eq(0)').replaceWith(function(){
    return $("<td />").append($(this).contents());
});
$('thead th').attr('scope', 'col');

【讨论】：