如果我从表中选择一个条目，该值将显示在按钮上，但是当我更改到另一个表页面时，它不再起作用。如果我现在刷新 html 页面，则只有此表格页面可以工作。
我必须更改什么才能更改表格页面并选择要显示的条目？
这是我的 html:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TITLE</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"> <!-- Table -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> <!-- Table -->
<script src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script> <!-- Table -->
<style type="text/css">
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:80px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
text-align: center;
margin-top: -80px; /* negative value of footer height */
height: 80px;
clear:both;
padding-top:20px;
}
.loginwidth {
width:300px;
}
</style>
</head>
<body role="document">
<div id="wrap">
<div id="main" class="container theme-showcase" role="main">
<div class="row-fluid">
<br><br><br><br> </div> <!-- row -->
<div class="row-fluid">
<div class="page-header">
<h1>DELETE</h1>
<p><button id="usrButton" type="button" class="btn btn-default btn-sm" style="width: 400px;"><span class="glyphicon glyphicon-trash"></span> EMail <b><span id="id_username"></span></b> Delete</button></p>
<p><button id="nrButton"type="button" class="btn btn-default btn-sm" style="width: 400px;"><span class="glyphicon glyphicon-trash"></span> NR <b><span id="nr_number"></span></b> Delete</button></p>
</div>
</div> <!-- row -->
<div class="row-fluid">
<table id="datatable" class="table table-striped table-hover table-condensed" cellspacing="0" width="100%">
<thead>
<tr>
<th>User ID</th>
<th>EMail</th>
<th>Number</th>
<th>NR</th>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
<td>OnE@trashmail.com</td>
<td>4252413214</td>
<td></td>
</tr>
<tr>
<td>22</td>
<td>Two@trashmail.com</td>
<td>7089174804</td>
<td>01234000</td>
</tr>
<tr>
<td>21</td>
<td>Three@trashmail.com</td>
<td>3682199489</td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>4u@trashmail.com</td>
<td>3041695348</td>
<td></td>
</tr>
<tr>
<td>19</td>
<td>Inf0@trashmail.com</td>
<td>4831983349</td>
<td>01826718</td>
</tr>
<tr>
<td>2</td>
<td>notMe@trashmail.com</td>
<td>1179394945</td>
<td>02050039</td>
</tr>
<tr>
<td>14</td>
<td>Test@trashmail.com</td>
<td>0265164918</td>
<td>01824010</td>
</tr>
<tr>
<td>24</td>
<td>what@trashmail.com</td>
<td>4016411332</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>SiX@trashmail.com</td>
<td>2124149389</td>
<td></td>
</tr>
<tr>
<td>12</td>
<td>Seven@trashmail.com</td>
<td>0113254286</td>
<td>01825638</td>
</tr>
<tr>
<td>15</td>
<td>world@trashmail.com</td>
<td>1053223407</td>
<td></td>
</tr>
<tr>
<td>30</td>
<td>button@trashmail.com</td>
<td>1059923407</td>
<td>0815</td>
</tr>
<tr>
<td>40</td>
<td>go@trashmail.com</td>
<td>25412545</td>
<td></td>
</tr>
</tbody>
</table>
</div> <!-- row -->
</div> <!-- main -->
</div> <!-- wrap -->
<div class="footer">
<p><h4 class="text-center">Copyright © <small>2015</small></h4></p>
</div>
<script>
$(document).ready(function(){
var email = "";
var nr = "";
$('#usrButton').prop('disabled', true);
$('#nrButton').prop('disabled', true);
//----------------------------------------------------
$('#datatable').DataTable( {
stateSave: true,
scrollY: "350px",
paging: true
} );
//----------------------------------------------------
$('#datatable tr').click(function() {
email = $(this).find("td").eq(1).html();
nr = $(this).find("td").eq(3).html();
$('#id_username').html(email);
$('#nr_number').html(nr);
$('#usrButton').prop('disabled', email.trim() == "");
$('#nrButton').prop('disabled', nr.trim() == "");
});
//----------------------------------------------------
});
</script>
</body>
</html>
我也尝试在 jsfiddle 中插入此代码，但它无法正常工作？？？ http://jsfiddle.net/rule_34/t0eszv7w/
最佳答案
<强> DEMO
您在这里需要事件委托(delegate)，因为当您移动下一页时，tr 会动态构建和添加。所以你需要更改你的代码如下:
$(document).on('click','#datatable tr',function () {
email = $(this).find("td").eq(1).html();
nr = $(this).find("td").eq(3).html();
$('#id_username').html(email);
$('#nr_number').html(nr);
$('#usrButton').prop('disabled', email.trim() == "");
$('#nrButton').prop('disabled', nr.trim() == "");
});
更新
为了获得更好的性能，您可以直接将其添加到 table 中，而不是通过文档附加事件，因为 tr 位于 table 内，并且 table 将被静态
$("#datatable").on('click','tr',function () {
email = $(this).find("td").eq(1).html();
nr = $(this).find("td").eq(3).html();
$('#id_username').html(email);
$('#nr_number').html(nr);
$('#usrButton').prop('disabled', email.trim() == "");
$('#nrButton').prop('disabled', nr.trim() == "");
});
<强> DEMO
关于JavaScript 仅适用于实际的表格页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32605404/