如何添加可以按ID轉到下一頁的點擊事件行？
[英]How to add a click event row that can go to next page by id?
問題描述
在這里，是我從“堆棧溢出”頁面獲得的編碼。 window.location應該按id轉到下一頁，但是我不知道如何編碼。
function addRowHandlers() {
var table = document.getElementById("employee-click");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
window.location.href = "detail.php";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
}
這是我的html代碼。 您能幫我這個代碼嗎？
<!DOCTYPE html> <html> <title>Data Biodata</title> <head> <meta name="author" content="Arkaprava majumder" /> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { var dataTable = $('#employee-grid').DataTable({ processing: true, serverSide: true, ajax: "dataBiodata.php", // json datasource }); $("#employee-grid_filter").css("display", "none"); // hiding global search box $('.employee-search-input').on('keyup click change', function() { var i = $(this).attr('id'); // getting column index var v = $(this).val(); // getting search input value dataTable.columns(i).search(v).draw(); }); }); function addRowHandlers() { var table = document.getElementById("employee-click"); var rows = table.getElementsByTagName("tr"); for (i = 0; i < rows.length; i++) { var currentRow = table.rows[i]; var createClickHandler = function(row) { return function() { var cell = row.getElementsByTagName("td")[0]; var id = cell.innerHTML; window.location.href = "detail.php"; }; }; currentRow.onclick = createClickHandler(currentRow); } } </script> <style> div.container { max-width: 980px; margin: 0 auto; cursor: pointer; } div.header { margin: 0 auto; max-width: 980px; } body { background: #f7f7f7; color: #333; } .employee-search-input { width: 100%; } </style> </head> <body onload="addRowHandlers()"> <div class="header"> <h1>Data Biodata</h1> </div> <div class="container"> <!-- <center> <button style="right:150"> <a href="Biodata.php">Create New</a></button></center>--> <table id="employee-grid" class="display" cellpadding="5" cellspacing="1" width="100%" border="1" style="text-align: justify;"> <thead> <tr> <th>No</th> <th>Year</th> <th>System</th> <th>Courses</th> <th>SVC No</th> <th>Pangkat</th> <th>Name</th> </tr> </thead> <thead> <tr> <td><input type="text" id="0" class="employee-search-input"></td> <td><input type="text" id="1" class="employee-search-input"></td> <td><input type="text" id="2" class="employee-search-input"></td> <td><input type="text" id="3" class="employee-search-input"></td> <td><input type="text" id="4" class="employee-search-input"></td> <td><input type="text" id="5" class="employee-search-input"></td> <td><input type="text" id="6" class="employee-search-input"></td> </tr> </thead> <tbody id="employee-click"> <tr> <th>No</th> <th>Year</th> <th>System</th> <th>Courses</th> <th>SVC No</th> <th>Pangkat</th> <th>Name</th> </tr> </tbody> </table> </div> </body> </html>
1 個解決方案
解決方案1
0 2018-05-07 10:05:43
我不知道您要重定向哪個id 。 但是我認為您應該將addRowHandlers函數更改為此。 獲取並使用您提到的id ，並在alert之后使用它。
function addRowHandlers() {
var tbody = $("#employee-click tr"); //document.getElementById("employee-click");
tbody.each(function() {
$(this).on('click', function() {
alert("hi");;
// window.location.href = "";
})
})
}
最終的代碼是
$(document).ready(function() { var dataTable = $("#employee-grid").DataTable({ processing: true, serverSide: true, ajax: "dataBiodata.php" // json datasource }); $("#employee-grid_filter").css("display", "none"); // hiding global search box $(".employee-search-input").on("keyup click change", function() { var i = $(this).attr("id"); // getting column index var v = $(this).val(); // getting search input value dataTable .columns(i) .search(v) .draw(); }); }); function addRowHandlers() { var tbody = $("#employee-click tr"); //document.getElementById("employee-click"); tbody.each(function() { $(this).on('click', function() { alert("hi");; // window.location.href = ""; }) }) }
div.container { max-width: 980px; margin: 0 auto; cursor: pointer; } div.header { margin: 0 auto; max-width: 980px; } body { background: #f7f7f7; color: #333; } .employee-search-input { width: 100%; }
<html> <title>Data Biodata</title> <head> <meta name="author" content="Arkaprava majumder" /> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> </head> <body onload="addRowHandlers()"> <div class="header"> <h1>Data Biodata</h1> </div> <div class="container"> <!-- <center> <button style="right:150"> <a href="Biodata.php">Create New</a></button></center>--> <table id="employee-grid" class="display" cellpadding="5" cellspacing="1" width="100%" border="1" style="text-align: justify;"> <thead> <tr> <th>No</th> <th>Year</th> <th>System</th> <th>Courses</th> <th>SVC No</th> <th>Pangkat</th> <th>Name</th> </tr> </thead> <thead> <tr> <td><input type="text" id="0" class="employee-search-input"></td> <td><input type="text" id="1" class="employee-search-input"></td> <td><input type="text" id="2" class="employee-search-input"></td> <td><input type="text" id="3" class="employee-search-input"></td> <td><input type="text" id="4" class="employee-search-input"></td> <td><input type="text" id="5" class="employee-search-input"></td> <td><input type="text" id="6" class="employee-search-input"></td> </tr> </thead> <tbody id="employee-click"> <tr> <th>No</th> <th>Year</th> <th>System</th> <th>Courses</th> <th>SVC No</th> <th>Pangkat</th> <th>Name</th> </tr> </tbody> </table> </div> </body> </html>
jQuery-如何查找ID或觸發操作點擊事件的行？
[英]JQuery - How to find the id or the row that triggered the action click event?
在表格行中有一個輸入復選框，我可以將click事件添加到行，仍然可以單擊輸入
[英]with an input checkbox inside a table row, can i add click event to row and still be able to click input
如何在不重新加載網格的情況下將行添加到下一頁中的 jqGrid？
[英]How to add row to a jqGrid in next page without reloading the grid?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.