个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我搜索了很多并阅读了有关使填充可点击的不同问题，但我找不到有关 datatables 的信息单元格填充。我想知道如何才能做到这一点。我附上了屏幕截图，其中 green我想让部分可点击。
我还想问一件事是rowlink.js插件将使用数据表与数据库一起使用。如果可能的话，给我一个简单的例子来理解这一点。我尝试过，但 rowlink.js 的所有功能没有与datatables一起工作。谢谢:)
<?php
$con = mysql_connect( 'localhost', 'root', '' )or die( 'can not connect to server' . $conn->connect_error );
if ( $con ) {
mysql_select_db( 'syspos', $con )or die( 'can not seletc the database' . $conn->connect_error );
}
$sql = "SELECT * FROM tbproduct";
$result = mysql_query($sql);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Clickable Paddind</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<style>
td a {
display: block;
}
td {
border-left: none !important;
border-right: none !important;
border-bottom-width: 1px !important;
border-bottom-color: black !important;
border-bottom-style: solid !important;
}
tbody:hover tr:hover td {
background-color: #A9A9A9;
}
tbody:hover tr:hover a {
color: white;
}
</style>
</head>
<body>
<br><br>
<div class="container">
<div class="table-responsive">
<table id="data" class="table table-striped table-bordered">
<thead>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
</thead>
<tbody id="my" data-link="row" class="rowlink">
<?php
while($row = mysql_fetch_array($result))
{
echo '
<tr>
<td id="one" ><a href="#">'.$row["cat_id"].'</a></td>
<td id="two" ><a href="#">'.$row["product_name"].'</a></td>
<td id="three" ><a href="#">'.$row["quantity"].'</a></td>
</tr>';
}
?>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$('#data').DataTable();
} );
</script>
最佳答案
使用Znaneswar想法:
我修改了您的示例以创建 fiddle :https://jsfiddle.net/nrfsgs0x/2/
如果删除 css，在 td 元素上运行 fiddle 并打开开发工具，您会发现 padding: 8px 来自 bootstrap.css 作为选择器的样式 .table>tbody>tr>td
要覆盖它，您需要提供更具体的选择器 padding: 0。诀窍是向类名添加标签，以便选择器看起来像 table.table tbody tr td。
然后需要在a中添加padding: 8px。详情请参阅 fiddle 。
附注事实上，我建议您向表中添加一个特定的类，并使用该类作为 css 中的命名空间，以避免将特定表的特定样式泄漏到 html 页面中您可能不需要它们的其他位置。我先这样做了，然后修改了 fiddle ，使其尽可能接近您的代码。您可以引用 fiddle 的第一个版本来理解我的意思:https://jsfiddle.net/nrfsgs0x/0/
关于javascript - 如何使数据表内的填充可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46482324/
25
4
0
我有一个带有嵌套数据的 angular 数据表，我正在尝试在行点击函数上创建另一个数据表。父数据表的 rowCallBack 函数。 这是我的外部数据表 html； 这是我生成数据表的方
我有一个字母数字列，其中包含诸如“1、2、2”之类的字符串。 当我在搜索中输入“1, 2, 2”时，它似乎返回带有“1,”和“2,”的所有单元格。 我该怎么做才能使搜索仅返回“1、2、2”？ 使用数据
我有一个获取其数据服务器端的表，使用自定义服务器端初始化参数，这些参数因生成的报告而异。表格生成后，用户可以打开一个弹出窗口，他们可以在其中添加多个附加过滤器以进行搜索。我需要能够使用与原始表相同的初
在 datatables我希望能够隐藏所有列，但似乎无法正确使用语法。 这来自下面的代码和上面的链接，创建了一个显示所有列的按钮。有没有办法写这个以便我可以隐藏所有列？ {
我正在使用 DataTable 创建一个交互式表。我有 9 列，其中 5 列是值。我想根据它们的具体情况更改每个单元格的背景颜色。 我已经开始尝试首先更改整行颜色，因为这似乎是一项更容易的任务。但是我
我有一个简单的例子来说明我的问题。我正在使用数据表 1.9。当数据表位于另一个 html 表内时，水平滚动时列标题不会移动。当它不在 html 表中时它工作正常。我的示例实际上取自他们的水平滚动示例，
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
这是添加按钮以将数据导出到 csv、pdf、excel 的数据表示例...... fiddle here https://datatables.net/extensions/buttons/examp
是否有任何方法可以更改 angularjs 数据表中的按钮样式(colvis、copy、print、excel)。 vm.dtOptions = DTOptionsBuilder.newOptions
我试图弄清楚如何加入 2 个数据表并更新第一个但应用了过滤器。 DT DT2 b c 1: 1 10 2: 2 10 3: 3 10 4: 4 10 5: 5 10 6: 6 10 7: 7 10
我有一个数据表，其中包含许多包含值的列。我还有另一列，它定义了我需要选择哪些列的值。我很难找到一种方法来做到这一点。 这是一个简单的例子。 > d d value.1 value.2 name
我正在使用 data.table 包。我有一个数据表，表示用户在网站上的操作。假设每个用户都可以访问一个网站，并对其执行多项操作。我的原始数据表是 Action (每一行都是一个 Action )，我
我想知道每个变量在每个组中变化了多少次，然后将结果添加到所有组中。 我是这样找到的: mi[,lapply(.SD, function(x) sum(x != shift(x), na.rm=T)
有人可以向我解释一下如何向页眉或页脚添加按钮吗？Datatables 的开发者 Alan 说你必须离开网络服务器才能使用 Table Tools 来使用按钮。但我在独立计算机上离线运行 Datatab
我希望按 id 和按顺序(时间)计算不同的东西。 例如，与: dt = data.table( id=c(1,1,1,2,2,2,3,3,3), hour=c(1,5,5,6,7,8,23,23,23
我正在尝试在 JIRA 小工具中使用数据表，但在我的表准备就绪后，没有可用的分页按钮。我有一个表，我正在以最简单的方式使用数据表:$("#mytableid").dataTable(); 浏览页面元素
我有 responsive 表单中的数据表。 数据表生成 child rows在小型设备上。在这一行中，我有一些输入控件。这会导致两个问题。 第一个问题:**隐藏子行中的值不会进入表单数据。** 第二
我在使用 JQuery DataTable 捕获 keydown 事件时遇到问题。我的目标是允许用户使用箭头键导航表的行。因此，当用户按下箭头键时，我想捕获 keydown 事件并移动表的选定行(这是
是否有任何方法可以以编程方式更改显示的行数，而无需从下拉列表中手动选择？ 我已经知道如何更改默认行数。当表首次加载时，我希望它加载所有行，然后“刷新”表以可能仅显示前 10 行。但我想以编程方式刷新表
我有一个数据表，我应该对其进行更改，例如我想更改内容的状态，但该内容位于表的第三页。当我更改它时，数据表会自行刷新到第一页。我想做的是保留选定的页码并在刷新后回调它。这可能吗？ 顺便说一句，我正在使用
我是一名优秀的程序员,十分优秀！