问题：我正在运行一个基本的Web应用程序，以从用户那里获取ID号和日期，提交上述信息的结果返回了我数据库中的数据集。数据格式正确，并显示在漂亮的html表中。我正在使用DataTables 1.10.2（http://www.datatables.net/）来处理页面表的格式。在datatables .css文件中，我可以更改颜色并将鼠标悬停在颜色和字体上，我可以根据需要更改列宽，但是我无法使行出现在“条带化”显示中。这是我的网页的html文件（不是全部）。
<!--- jQuery --->
<script src="../DataTables-1.10.2/media/js/jquery.js"></script>
<!--- DataTables --->
<script src="../DataTables-1.10.2/media/js/jquery.dataTables.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../DataTables-1.10.2/media/css/jquery.dataTables.css"> -->
<!--- DataTables CSS --->
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.2/media/css/test.css">
<!--- <link rel="stylesheet" type="text/css" href="../DataTables-1.10.2/media/css/jquery.dataTables.css"> --->
<script>
<!--- tells the browser to use DataTablkes to style the html tables --->
$(document).ready( function () {
$('#table_id').dataTable();
});
...
<p>Enter the Advertiser ID and the Date to start at that you wish to report for.</p>
<p>Keep the date in the format YYYY-Mon-DD</p>
<div>
<label>Date :</label>
<!-- <input id="dateSub" type="text" value="YYYY-Mon-DT"> -->
<input id="dateSub" type="text" value="2014-Sep-05">
<label>Advertiser Id :</label>
<input id="adSub" type="text" value="351155">
<input id="button1" type="button" value="Submit">
</div>
<table id="table_id" class="stripe" width="auto" cellspacing="0">
<thead>
<tr>
<th>Hour</th>
<th>Count</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
这段代码按原样工作正常...无需尝试添加到标识table_id的脚本中以超越DataTables的默认功能，即：display compact，hover，strip ...仅默认的“ display”有效。
我希望能够通过class ='stripe'将DataTable的显示设置为条带化表格，但是无法通过将'stripe'关键字添加到HTML表的class =“”部分中来做到这一点。而这就是我迄今为止已阅读的文档中如何显示条纹表示例的示例。同样在上面，您将看到我已注释掉原始datatables.css文件，并且正在使用“ test.css”文件...它是DataTables1.10.2软件包随附的原始datatables.css文件的精确副本。复制到我的Web服务器之后，与DataTables包关联的所有其他文件也都保留为“按原样”。
除了其他问题之外，这个问题可以像预期的那样起作用，但这将是一个非常好的功能。这个问题可能会使我无法继续前进，这很烦人。
添加了完整的HTML源文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>:: XXXXXXXXXXXXXXXXXXXXXx ::</title>
<link rel="icon" type="image/jpg" href="../images/icons/small_icon.jpg">
<style>
body {background-color:#C8C8C8;}
<!--- p {color: grey;} --->
</style>
</head>
<!--- loading in our scripts --->
<!--- JQuery --->
<script src="../DataTables-1.10.2/media/js/jquery.js"></script>
<!--- DataTables --->
<script src="../DataTables-1.10.2/media/js/jquery.dataTables.min.js"></script>
<!--- Datatables CSS --->
<!--- <link rel="stylesheet" type="text/css" href="../DataTables-1.10.2/media/css/jquery.dataTables.css"> --->
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.2/media/css/test.css">
<script>
$(document).ready( function () { $('#table_id').DataTable(); });
$(document).ready( function () {
////////
$('#button1').click(function(){
console.log('asdfasdf')
var date = $("#dateSub").val();
var adid = $("#adSub").val();
var dataString="adid="+adid+"&"+"qdate="+date;
console.log(date+" "+adid)
$.ajax({
type: "GET",
url: "/",
data: dataString,
cache: false,
success: function(data){
var jsonArr = $.parseJSON(data)
var body=$("#table_id").find('tbody')
console.log('returned')
body.empty()
for (var i=0;i<jsonArr.length;i++){
body.append('<tr><td>'+jsonArr[i].hour+'</td><td>'+jsonArr[i].count+'</td></tr>');
}
}
})
})
/////////
})
</script>
这就是我在上述代码段中遗漏的所有内容，也许这将有助于缩小问题的范围：）
最佳答案
对我来说，似乎dataTables向表中的每一行添加了“偶数”和“奇数”类。您是否尝试过将CSS规则应用于它们？
这样的事情似乎应该对我有用：
table tbody tr.even{
color:#444;
}
因此，例如，当生成我的表时，html最终看起来像这样。
<table class="dataTable" role="grid" aria-describedby="table_info">
<thead>
<tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
</thead>
<tbody>
<tr class="odd" role="row">
<td>1</td>
<td class=" limitWidth">Dangerously</td>
<td class=" limitWidth">Johnny</td>
<td class="sorting_1">08/19/2014</td>
</tr>
<tr class="even" role="row">
<td>2</td>
<td class=" limitWidth" title="Jingleheimerschmidt">Jingleheimerschmidt</td>
<td class=" limitWidth">John</td>
<td class="sorting_1">06/12/2014</td>
</tr>
</tbody>
</table>
编辑：我搞砸了。这需要在CSS中使用冒号，而不是等号。
关于javascript - DataTables:难以格式化以删除行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25733122/