javascript - 使用复选框从数据库获取行 ID

标签 javascript html jsp checkbox

我正在尝试使用复选框从我的 MS Access 数据库中删除一行。我将数据库输出到 JSP 页面,每一行都有一个复选框。我在获取 rowId 以及将每个复选框与行链接时遇到问题。任何帮助将非常感激。谢谢。

<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>

<html>
<head>
<title>DELETE Operation</title>
<script>
     checkboxes = document.getElementsByTagName("input"); 

     for (var i = 0; i < checkboxes.length; i++) {
         var checkbox = checkboxes[i];
         checkbox.onclick = function() {
             var currentRow = this.parentNode.parentNode;
             var secondColumn = currentRow.getElementsByTagName("td")[1];

             alert("My text is: " + secondColumn.textContent );
         };
    }
</script>
</head>
<body>

<sql:setDataSource
    var = "bookdB"
    scope = "session"
    driver = "sun.jdbc.odbc.JdbcOdbcDriver"
    url = "jdbc:odbc:bookdB"
/>

<c:set var="empId" value="103"/>

<sql:update dataSource="${bookdB}" var="count">
  DELETE FROM Employees WHERE Id = ?
  <sql:param value="${empId}" />
</sql:update>

<sql:query dataSource="${bookdB}" var="result">
   SELECT * from Employees;
</sql:query>

<table border="1" width="100%">
<tr>
   <th></th>
   <th>Emp ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Age</th>
</tr>

<c:forEach var="row" items="${result.rows}">
<form method="post" action="reserve.jsp">
<tr>
   <td><input type = "checkbox" value="reserve"></td>
   <td><c:out value="${row.id}"/></td>
   <td><c:out value="${row.first}"/></td>
   <td><c:out value="${row.last}"/></td>
   <td><c:out value="${row.age}"/></td>
</tr>
</form>
</c:forEach>
<input type = "submit" value="Delete">
</table>

</body>
</html>

MS access database screenshot

image 2

最佳答案

如果我的猜测是正确的,您需要检查行并将其从用户界面以及数据库中删除。 从 UI 中删除表行要容易得多。首先,您需要为每行设置 id(必须是唯一的)(在您的情况下可能是 emp id)。像这样,

<table>
<tr id="${row.id}">
    <td><input type = "checkbox" value="${row.id}"></td>
    <td><c:out value="${row.id}"/></td>
    <td><c:out value="${row.first}"/></td>
    <td><c:out value="${row.last}"/></td>
    <td><c:out value="${row.age}"/></td>
</tr>
</table>
<input type="button" value="delete" onclick="deleteEmployee('${row.id}');" />

请注意,我不会为了删除目的而刷新页面。

在脚本方面,

<script type="text/javascript">
function deleteEmployee(rowid){
input_box = confirm("Are you sure you want to delete this Record?");
if (input_box == true) {
    // Output when OK is clicked
    $.ajax({
    url : 'ur_ajax_url_for_delete'+rowid,
    type : "POST",
    async : false,
    success : function() {
        $('#' + rowid).remove();
        alert('Record Deleted');
    }
       });

return false;
} else {
    // Output when Cancel is clicked
    return false;
}
  }
</script>

请告诉我这是否有帮助。您必须在 ajax url 中实现编程逻辑才能删除所选记录。

更新: 如果您正在寻找选择多个复选框并希望一次性删除, 您需要使用 javascript 获取所有选中的复选框值。像这样, 在 html 中使用复选框的 name 属性

<input type = "checkbox" value="${row.id}" name="empIds">

在脚本方面,

var empIds = [];
$('#empIds > :selected').each(function() {
empIds.push($(this).val());
});

在 ajax url 中使用此 empIds 而不是 rowId。 PS 您需要使用 java 中的整数/字符串数组来获取这些值。

Firebug 控制台的

屏幕截图 Firebug inspecting console

关于javascript - 使用复选框从数据库获取行 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20194969/

相关文章:

javascript - 如何对具有相同类的不同 div 使用相同的 JQuery 效果

javascript - 在 php 函数内部时,Sql 查询不起作用

javascript - PhoneGap : JavaScript Focus and Blur event in iOS/Android

html - 为什么显示属性设置为继承 CSS 变量不起作用?

javascript - 为什么我不能使用全局变量中的对象函数?

java - java web应用程序中的文件上传显示文件未找到异常

javascript - 在 div 内的第 n 个单词周围插入跨度

javascript - 函数 foo(){} 和 foo = function(){} 有什么区别?

java - 用于设置/获取 p :selectBooleanCheckbox 值的表达式语言

java - 如果响应中有多个值,如何从不同文本字段中的ajax响应中获取值?