JSP+Ajax添加删除Checkbox实例
js中checked用法
js中checked用法在JavaScript中，`checked` 是一个属性，用于表示一个复选框或者单选框是否被选中。
其用法如下：1.获取选中状态：可以使用`checked`属性来获取一个复选框或单选框的选中状态。
例如，假设有一个id为"myCheckbox"的复选框，可以通过以下代码获取其选中状态：```javascriptvar checkbox = document.getElementById("myCheckbox");console.log(checkbox.checked); // true 或者 false```2.设置选中状态：可以使用`checked`属性来设置一个复选框或单选框的选中状态。
例如，假设有一个id为"myCheckbox"的复选框，可以通过以下代码设置其选中状态：```javascriptvar checkbox = document.getElementById("myCheckbox");checkbox.checked = true; // 设置选中状态为true```3.监听选中状态变化：可以使用`change`事件来监听一个复选框或单选框的选中状态变化。
例如，假设有一个id为"myCheckbox"的复选框，可以通过以下代码监听其选中状态变化：```javascriptvar checkbox = document.getElementById("myCheckbox");checkbox.addEventListener("change", functioconsole.log(checkbox.checked); // 输出选中状态变化后的结果});```4.切换选中状态：可以使用`toggle`方法来切换一个复选框或单选框的选中状态。
jQueryEasyUI为Combo,Combobox添加清除值功能的实例
jQueryEasyUI为Combo,Combobox添加清除值功能的实例效果图：图标(function($){//初始化清除按钮function initClear(target){var jq = $(target);var opts = jq.data('combo').options;var combo = jq.data('combo').combo;var arrow = combo.find('bo-arrow');var clear = arrow.siblings("bo-clear");if(clear.size()==0){//创建清除按钮。
clear = $('<span class="combo-clear" style="height: 20px;"></span>');//清除按钮添加悬停效果。
clear.unbind("bo bo").bind("bo bo",function(event){var isEnter = event.type=="mouseenter";clear[isEnter ? 'addClass' : 'removeClass']("combo-clear-hover");});//清除按钮添加点击事件，清除当前选中值及隐藏选择⾯板。
clear.unbind("bo").bind("bo",function(){bo("setValue","").combo("setText","");bo('hidePanel');});arrow.before(clear);};var input = combo.find("bo-text");input.outerWidth(input.outerWidth()-clear.outerWidth());opts.initClear = true;//已进⾏清除按钮初始化。
checkbox控件使用方法
checkbox控件使用方法checkbox控件是一种常用的HTML表单控件，用于让用户从多个选项中选择一个或多个选项。
它通常以方框的形式出现，用户可以在方框内打勾或取消勾选。
以下是一些checkbox控件的使用方法：1. 创建checkbox控件要创建一个checkbox控件，需要使用<input>标签，并将type 属性设置为checkbox。
例如：<input type='checkbox' name='fruit' value='apple'>苹果 2. 把checkbox控件组合在一起如果要在一个表单中使用多个checkbox控件，可以将它们组合在一起。
例如：<input type='checkbox' name='fruit' value='apple'>苹果 <input type='checkbox' name='fruit' value='banana'>香蕉 <input type='checkbox' name='fruit' value='orange'>橙子 3. 通过JavaScript操作checkbox控件可以使用JavaScript来操作checkbox控件。
例如，可以通过以下代码获取checkbox控件的状态：var checkbox =document.getElementById('fruit_checkbox');if (checkbox.checked) {alert('已选择');} else {alert('未选择');}4. 提交表单时获取checkbox控件的值当用户提交表单时，可以通过以下代码获取所有被选中的checkbox控件的值：var fruits = document.getElementsByName('fruit');var selected_fruits = [];for (var i = 0; i < fruits.length; i++) {if (fruits[i].checked) {selected_fruits.push(fruits[i].value);}}alert('已选择的水果：' + selected_fruits.join(', '));这些是使用checkbox控件的一些基本方法。
JS实现CheckBox复选框全选、不选或全不选功能
JS实现CheckBox复选框全选、不选或全不选功能CheckBox控件表明⼀个特定的状态（即选项）是选定 (on，值为1) 还是清除 (off，值为0)。
在应⽤程序中使⽤该控件为⽤户提供“True/False”或“yes/no”的选择。
因为 CheckBox 彼此独⽴⼯作，所以⽤户可以同时选择任意多个 CheckBox，进⾏选项组合。
CheckBox复选框JS实现全选、不选、全不选功能，很简单，具体内容如下思路：1、获取元素2、给全选不选反选添加点击事件3、⽤for循环checkbox4、把checkbox的checked设置为true即实现全选5、把checkbox的checked设置为false即实现不选6、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。
html代码：<input type="button" value="全选" id="sele"/><input type="button" value="不选" id="setinterval"/><input type="button" value="反选" id="clear"/><div id="checkboxs"><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /><input type="checkbox"/><br /></div>js代码：<script>window.onload=function(){var sele=document.getElementById('sele');//获取全选var unsele=document.getElementById('setinterval');//获取不选var clear=document.getElementById('clear');//获取反选var checkbox=document.getElementById('checkboxs');//获取divvar checked=checkbox.getElementsByTagName('input');//获取div下的input//全选sele.onclick=function(){for(i=0;i<checked.length;i++){checked[i].checked=true}}//不选unsele.onclick=function(){for(i=0;i<checked.length;i++){checked[i].checked=false}}//反选clear.onclick=function(){for(i=0;i<checked.length;i++){if(checked[i].checked==true){checked[i].checked=false}else{checked[i].checked=true}}}}</script>以上所述就是本⽂的全部内容了，希望⼤家能够喜欢。
js+ajax实现增删改查案例
一、引言JavaScript（简称JS）是一种脚本语言，主要用于网页开发。
AJAX （Asynchronous JavaScript And XML）是一种前端技术，可以实现网页的异步通信。
在前端开发中，经常会用到JS+AJAX来实现增删改查功能。
本文将介绍如何使用JS+AJAX来实现一个简单的增删改查案例。
二、实现思路1. 准备工作：创建一个HTML页面，包含一个表格用于显示数据，以及相应的按钮用于触发增删改查操作。
准备一个后端接口用于提供数据的增删改查功能。
2. 查询数据：使用AJAX向后端接口发送请求，获取数据并在页面上展示。
3. 增加数据：通过表单输入要新增的数据，使用AJAX将数据发送到后端接口进行新增操作。
4. 修改数据：点击表格中的某一行数据，将数据填充到表单中，修改后通过AJAX发送到后端接口进行修改。
5. 删除数据：点击表格中的删除按钮，使用AJAX发送请求到后端接口进行删除操作。
三、实现步骤1. 创建HTML页面```html<!DOCTYPE html><html><head><title>JS+AJAX实现增删改查案例</title></head><body><table id="data-table"><tr><th>ID</th><th>尊称</th><th>芳龄</th><th>操作</th></tr></table><form id="data-form"><input type="text" id="name" placeholder="尊称"><input type="text" id="age" placeholder="芳龄"><button type="button" onclick="addData()">增加</button> </form></body></html>```2. 查询数据```javascriptfunction fetchData() {var xhr = new XMLHttpRequest();xhr.open('GET', '/api/data', true);xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText);// 渲染数据到表格}};xhr.send();}```3. 增加数据```javascriptfunction addData() {var name = document.getElementById('name').value; var age = document.getElementById('age').value;var data = { name: name, age: age };var xhr = new XMLHttpRequest();xhr.open('POST', '/api/data', true);xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 提示增加成功}};xhr.send(JSON.stringify(data));}```4. 修改数据```javascriptfunction editData(id) {var name = // 从表格中获取数据填充到表单中var age = // 从表格中获取数据填充到表单中var data = { name: name, age: age };var xhr = new XMLHttpRequest();xhr.open('PUT', '/api/data/' + id, true);xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 提示修改成功}};xhr.send(JSON.stringify(data));}```5. 删除数据```javascriptfunction deleteData(id) {var xhr = new XMLHttpRequest();xhr.open('DELETE', '/api/data/' + id, true);xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 提示删除成功}};xhr.send();}```四、总结通过以上步骤，我们使用JS+AJAX实现了一个简单的增删改查案例。
JSP 更新、添加与删除操作
JSP 更新、添加与删除操作更新数据库中的数据，可以使用SQL语句的UPDATE、INSERT和DELETE 操作，然后将包含UPDATE、INSERT、DELETE的SQL语句交给Statement对象的executeUpdate()方法执行。
Statement对象用于执行不带参数的简单SQL语句。
在J SP程序中，由于外部环境的变化，后台连接数据库中的数据每隔一段时间，就需要更新。
我们不可能直接打开MySQL数据库进行更新，一般情况下都是借助JSP程序进行更新。
1．数据添加案例现在创建一个案例，演示对数据库完成添加操作。
在JSP中，要完成数据库记录的添加操作，需要两个JSP页面，一个为数据输入页面，一个为处理数据页面。
参数值，并依据这些参数值创建sql添加语句。
变量name在获取name的参照值后，还需要进行编码转换，其语句为“name=new String(name.getBytes("iso-8859-1"))”。
下面使用对象stmt的方法executeUpdate执行相应的sql语句。
将上述两个文件复制到Tomcat服务器运行目录下。
打开IE浏览器，在地址栏中输入http://localhost:8080/JSPExample/MySQLInsert.jsp，单击【转到】，会显示如图6-10所示窗口：图6-10 数据添加输入页面在图6-10中的文本域中，分别输入要添加的信息。
然后单击【提交】按钮，会显示如图6-11所示窗口：图6-11 数据添加成功2．删除和修改数据执行删除与修改操作也非常简单，都可以通过向数据库发送sql语句来完成。
只不过执行的sql语句不同罢了。
下面创建一个案例，演示对MySQL数据库执行数据修改和删除。
打开记事本，创建MySQLGeng.jsp文件，完成数据的修改和删除操作。
其代码如下所示：将上述代码保存，并将文件复制到C:\Tomcat 6.0\webapps\JSPExample目录下。
JS绑定事件和移除事件的处理方法
JS绑定事件和移除事件的处理方法JavaScript是一种强大而灵活的编程语言，用于在网页中添加交互性和动态性。
在网页开发中，我们经常需要为各种事件绑定相应的处理方法，以便在特定的交互行为发生时执行相应的代码。
除了绑定事件，我们还需要在一些情况下移除已经绑定的事件，以确保页面的正常运行。
本文将详细介绍在JavaScript中如何绑定和移除事件的处理方法。
一、绑定事件处理方法在JavaScript中，可以通过以下几种方式来绑定事件处理方法：```html<button onclick="alert('按钮被点击了！')">点击按钮</button> ```这种方式非常简单直接，但由于JS代码和HTML混在一起，所以不利于代码的维护和重用。
2. 使用element.addEventListener(方法更常用的方法是使用element.addEventListener(方法，该方法可以为元素添加多个事件处理方法。
例如，下面的代码绑定了一个按钮的点击事件：```html<button id="myButton">点击按钮</button>``````javascriptvar button = document.getElementById('myButton');button.addEventListener('click', functioalert('按钮被点击了！');});```这样我们就可以在JavaScript中定义事件处理方法，而不需要将所有代码写在HTML中。
此外，使用addEventListener(方法的好处是可以为同一个元素绑定多个不同的事件处理方法，而不会互相覆盖。
3. 使用element.on[event]属性除了addEventListener(方法外，还可以直接使用元素的on[event]属性，其中[event]表示具体的事件名称，如click、mouseover等。
java中checkbox的用法
java中checkbox的用法摘要：I.引言- 介绍Java 中CheckBox 的用法II.CheckBox 组件的属性- 定义CheckBox 组件- 设置CheckBox 组件的属性- 名称- 标签- 选中状态- 边框- 背景色- 字体III.CheckBox 组件的方法- 定义CheckBox 组件的方法- isSelected()- setSelected()- toggle()IV.CheckBox 组件的事件- 定义CheckBox 组件的事件- 选中事件- 取消选中事件V.CheckBox 组件的应用- 在Java Swing 中使用CheckBox 组件- 在JavaFX 中使用CheckBox 组件VI.总结- 回顾CheckBox 组件的属性和方法- 总结CheckBox 组件在Java 开发中的应用正文：CheckBox 是Java 中常用的组件之一，主要用于创建单选按钮。
在Java Swing 和JavaFX 中都可以使用CheckBox 组件。
本文将详细介绍Java 中CheckBox 的用法。
首先，我们需要定义CheckBox 组件。
在Java Swing 中，可以使用`JCheckBox` 类来创建CheckBox 组件；在JavaFX 中，可以使用`CheckBox` 类来创建CheckBox 组件。
接下来，我们可以设置CheckBox 组件的属性。
CheckBox 组件的属性包括名称、标签、选中状态、边框、背景色和字体等。
其中，名称和标签是必填属性，用于指定CheckBox 的名称和显示文本。
选中状态、边框、背景色和字体等属性是可选的，可以根据需要进行设置。
CheckBox 组件提供了一些方法，用于操作CheckBox 的状态。
其中包括isSelected() 方法，用于检查CheckBox 是否被选中；setSelected() 方法，用于设置CheckBox 的选中状态；toggle() 方法，用于切换CheckBox 的选中状态。
js实现添加删除表格操作
js实现添加删除表格操作本⽂实例为⼤家分享了js实现添加删除表格的具体代码，供⼤家参考，具体内容如下效果:1、点击添加按钮往table中添加⼀⾏将全选前⾯的复选框变成false1.1.当前新增的复选框加上点击事件2、点击删除按钮获取表格体中被选中的⾏, 删除整个tr, 将全选前⾯的复选框变成false获取的是第⼀个td中的checkbox的状态 checked为true 2层⽗⼦3 、点击全选按钮前⾯的复选框如果被选中下⾯的每⼀个复选框都被选中如果不被选中下⾯的每⼀个复选框都不被选中4、点击每⼀个表格体中的复选框, 如果所有的复选框都被选中, 全选按钮就是被选中, 如果有⼀个没有被选中, 全选按钮就是不选中状态css：<style>.head {width: 500px;padding: 8px;margin: 20px auto;box-sizing: border-box;border: 1px solid #eee;}input {margin-left: 3px;outline: none;}button {float: right;}table {width: 500px;border: 1px solid #000;margin: 0 auto;border-collapse: collapse;}tr,td,th {border: 1px solid #000;}tr td:nth-child(1) {text-align: center;}.foot {width: 500px;margin: 8px auto;padding: 8px;box-sizing: border-box;}.foot button {float: right;}td:nth-child(2),td:nth-child(3),td:nth-child(4) {width: 20%;}</style>html:<div class="head"><span>请输⼊姓名 :</span><input type="text"><br><span>请输⼊性别 :</span><input type="radio" name="sex" checked>男<input type="radio" name="sex">⼥<br> <span>请输⼊年龄 :</span><input type="text"><button>添加到表格</button></div><table><thead><th><input type="checkbox"> 全选</th><th>姓名</th><th>性别</th><th>年龄</th></thead><tbody><tr class="tr1"><td><input type="checkbox"></td><td>张三</td><td>⼥</td><td>88</td></tr><tr><td><input type="checkbox"></td><td>李四</td><td>男</td><td>18</td></tr><tr><td><input type="checkbox"></td><td>王五</td><td>⼥</td><td>12</td></tr></tbody></table><div class="foot"><button>删除所选⾏</button></div>javascript:// 事件三部曲// 1. 获取元素按钮 table tBody 复选框 inpvar btns = document.querySelectorAll('button');var table = document.querySelector('table');var inps = document.querySelectorAll('input');var all = table.tHead.querySelector('input');var cks = table.tBodies[0].getElementsByTagName('input');var cks1 = table.tBodies[0].querySelectorAll('input');// console.log(btns, table, inps, cks);// console.log(cks, all);console.log(cks, cks1);// 2. 点击添加按钮btns[0].onclick = function(){// 3. 往table中添加⼀⾏var tr = document.createElement('tr');// 4. tr加到tbodytable.tBodies[0].appendChild(tr);// 5. 创建tdvar inp = document.createElement('td');inp.innerHTML = '<input type="checkbox">';tr.appendChild(inp);var user = document.createElement('td');user.innerHTML = inps[0].value;tr.appendChild(user);var sex = document.createElement('td');sex.innerHTML = inps[1].checked ? '男' : '⼥';tr.appendChild(sex);var age = document.createElement('td');age.innerHTML = inps[3].value;tr.appendChild(age);// 6. 全选前⾯的复选框变成falseall.checked = false;// 当前新增的复选框加上点击事件var bck = tr.querySelector('input');console.log(bck);bck.onclick = function(){auto();}}// 7. 点击删除按钮删除所选中的⾏btns[1].onclick = function(){// 8. 获取表格体中被选中的⾏// console.log(cks, cks1);// 9. 判断复选框是否被选中for(var i = 0; i < cks.length; i++){console.log(cks);if(cks[i].checked){// console.log(cks[i].parentNode.parentNode);// console.log(cks);// 10. 删除整⾏cks[i].parentNode.parentNode.remove();i--;}}// 11. 将全选前⾯的复选框变成falseall.checked = false;}// 点击全选按钮前⾯的复选框如果被选中下⾯的每⼀个复选框都被选中如果不被选中下⾯的每⼀个复选框都不被选中// 12. 点击allall.onclick = function(){console.log(all.checked);// 13. 每⼀个for(var i = 0; i < cks.length;i++){cks[i].checked = all.checked;}}// 点击每⼀个表格体中的复选框, 如果所有的复选框都被选中, 全选按钮就是被选中, 如果有⼀个没有被选中, 全选按钮就是不选中状态 for(var j = 0; j < cks.length; j++){// 点击cks[j].onclick = function(){// 所有的// for(var i = 0; i < cks.length; i++){// console.log(cks[i].checked);// // 如果有⼀个没有被选中, 全选按钮就是不选中状态// if(cks[i].checked == false){// // 全选按钮就是不选中// all.checked = false;// // 结束整个函数// return;// }// }// // 所有的都被选中// all.checked = true;auto();}}function auto() {// 所有的for(var i = 0; i < cks.length; i++){console.log(cks[i].checked);// 如果有⼀个没有被选中, 全选按钮就是不选中状态if(cks[i].checked == false){// 全选按钮就是不选中all.checked = false;// 结束整个函数return;}}// 所有的都被选中all.checked = true;}效果:以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
JQuery中Ajax的操作完整例子
JQuery中Ajax的操作完整例⼦Java软件开发中，后台中我们可以通过各种框架，像SSH等进⾏对代码的封装，⽅便我们对Java代码的编写，例如，Struts,SpringMVC对从前台到action的流程进⾏封装控制，使我们只需要进⾏⼀些简单配置就可以实现；⽽spring进⾏了对各种对象的管理进⾏封装，提供了AOP编程的⽅式，⼤⼤⽅便了我们；⽽hibernate和IBatis则是对JDBC代码进⾏封装，不需要我们每次都写那些重复⽽繁杂的JDBC代码。
前台呢，对于页⾯⼀些效果，验证等，我们都是通过JavaScript语⾔进⾏完成的，但是它也就像我们的Java代码⼀样，是最前台语⾔最基础的，⽽jQuery则是对js代码进⾏封装⽅便我们前台代码的编写，⽽且它还有⼀个⾮常⼤的优势就是解决了浏览器的兼容问题，这也是我们使⽤它⾮常重要的原因之⼀。
⽽现在为了满⾜⽤户的需求，Ajax（Asynchronous Javascript + XML）异步刷新起到了⽆可⽐拟的作⽤，以前写Ajax操作，总是需要我们想JDBC代码⼀样进⾏⼏个必备的步骤：AJAX——核⼼XMLHttpRequest对象，⽽JQuery也对Ajax异步操作进⾏了封装，这⾥看⼀下⼏种常⽤的⽅式。
$.ajax，$.post， $.get， $.getJSON。
⼀， $.ajax，这个是JQuery对ajax封装的最基础步，通过使⽤这个函数可以完成异步通讯的所有功能。
也就是说什么情况下我们都可以通过此⽅法进⾏异步刷新的操作。
但是它的参数较多，有的时候可能会⿇烦⼀些。
看⼀下常⽤的参数：var configObj = {method //数据的提交⽅式：get和posturl //数据的提交路劲async //是否⽀持异步刷新，默认是truedata //需要提交的数据dataType //服务器返回数据的类型，例如xml,String,Json等success //请求成功后的回调函数error //请求失败后的回调函数}$.ajax(configObj);//通过$.ajax函数进⾏调⽤。
js checkbox用法
js checkbox用法JavaScript是当前应用最为广泛的编程语言之一，它被广泛应用于网页交互、动态效果和用户交互等方面。
而checkbox是JavaScript最常见的表单元素之一，用于在表单中选择或取消选择一个或多个选项。
在本文中，我们将深入探讨checkbox的用法和应用，包括基本用法、状态设置、选项操作、事件绑定以及常见应用。
一、基本用法在HTML表单中使用checkbox是非常简单的。
以下是基本的代码示例：<input type="checkbox" name="sports" value="football" checked>足球在上面的代码中，我们可以看到几个重要的属性：- type: 表示元素的类型。
在这里，我们使用checkbox。
- name: 表示元素的名称。
- value: 表示元素的值。
- checked: 表示元素是否默认选中。
当用户勾选一个checkbox时，表单的值将被发送到Web服务器，并在服务器端进行处理。
二、状态设置我们可以通过JavaScript来设置checkbox的状态。
以下是一个简单的例子：<input type="checkbox" id="sports" name="sports" value="1">足球<button onclick="check()">Check</button><script>function check() {var checkbox = document.getElementById("sports");checkbox.checked = true;}</script>在上面的代码中，我们为checkbox元素添加了一个id属性，并通过getElementById()方法获取该元素。
JSP+Servlet+Ajax实现用户增删改查的例子
JSP+Servlet+Ajax实现⽤户增删改查的例⼦⼀、数据库设计⽤户表User已有的测试数据⼆、Java代码编写Java EE的架构⼀般分为以下五层：①.Domain②.DAO③.Service④.Controller⑤.View这⾥的项⽬结构如下：使⽤的环境为：JDK1.8+Servlet3.0+Tomcat8.0前端统⼀使⽤Ajax⽅式和JSON数据格式向后端发送请求及数据，后端统⼀返回JSON数据格式的信息1.Domain层1package domain;23import java.util.Date;45public class User {67public User() {89 }1011private Integer id;1213private String account;1415private String password;1617private String name;1819private String info;2021private Date createTime;2223private Date modifiedTime;2425public Integer getId() {26return id;27 }2829public void setId(Integer id) {30this.id = id;31 }3233public String getAccount() {34return account;35 }3637public void setAccount(String account) {38this.account = account;39 }4041public String getPassword() {42return password;43 }4445public void setPassword(String password) {46this.password = password;47 }4849public String getName() {50return name;51 }5253public void setName(String name) { = name;55 }5657public String getInfo() {58return info;59 }6061public void setInfo(String info) { = info;63 }6465public Date getCreateTime() {66return createTime;67 }6869public void setCreateTime(Date createTime) {70this.createTime = createTime;71 }7273public Date getModifiedTime() {74return modifiedTime;75 }7677public void setModifiedTime(Date modifiedTime) { 78this.modifiedTime = modifiedTime;82public String toString() {83return "User [id=" + id + ", account=" + account + ", password=" + password + ", name=" + name + ", info="84 + info + ", createTime=" + createTime + ", modifiedTime=" + modifiedTime + "]";85 }8687 }User.java2.Dao层1package dao;23import java.util.List;45import er;67public interface UserDao {89/** 显⽰所有⽤户 */10public List<User> listAll();1112/** 添加⼀个⽤户 */13public boolean add(User user);1415/** 根据id删除⼀个⽤户 */16public boolean deleteById(Integer id);1718/** 更新⼀个⽤户 */19public boolean update(User user);2021/** 根据id查找⼀个⽤户 */22public User getById(Integer id);2324 }UserDao.java1package dao.impl;23import java.sql.Connection;4import java.sql.PreparedStatement;5import java.sql.ResultSet;6import java.sql.SQLException;7import java.util.ArrayList;8import java.util.List;910import erDao;11import er;12import util.DBUtil;1314public class UserDaoImpl implements UserDao {1516 @Override17public List<User> listAll() {18 List<User> users = new ArrayList<User>();19 Connection conn = DBUtil.getConnection();20 String sql = "select * from user";21try {22 PreparedStatement pst = conn.prepareStatement(sql);23 ResultSet rst = pst.executeQuery();24while (rst.next()) {25 User user = new User();26 user.setId(rst.getInt("id"));27 user.setAccount(rst.getString("account"));28 user.setPassword(rst.getString("password"));29 user.setName(rst.getString("name"));30 user.setInfo(rst.getString("info"));31 user.setCreateTime(rst.getTimestamp("gmt_create"));32 user.setModifiedTime(rst.getTimestamp("gmt_modified"));33 users.add(user);34 }35 rst.close();36 pst.close();37 } catch (SQLException e) {38 e.printStackTrace();39 }40return users;44public boolean add(User user) {45 Connection conn = DBUtil.getConnection();46 String sql = "insert into user(account, password, name, info) value (?, ?, ?, ?)";47try {48 PreparedStatement pst = conn.prepareStatement(sql);49 pst.setString(1, user.getAccount());50 pst.setString(2, user.getPassword());51 pst.setString(3, user.getName());52 pst.setString(4, user.getInfo());53int count = pst.executeUpdate();54 pst.close();55return count > 0 ? true : false;56 } catch (SQLException e) {57 e.printStackTrace();58 }59return false;60 }6162 @Override63public boolean deleteById(Integer id) {64 Connection conn = DBUtil.getConnection();65 String sql = "delete from user where id = ?";66try {67 PreparedStatement pst = conn.prepareStatement(sql);68 pst.setInt(1, id);69int count = pst.executeUpdate();70 pst.close();71return count > 0 ? true : false;72 } catch (SQLException e) {73 e.printStackTrace();74 }75return false;76 }7778 @Override79public boolean update(User user) {80 Connection conn = DBUtil.getConnection();81 String sql = "update user set account = ?, password = ?, name = ?, info = ? where id = ?"; 82try {83 PreparedStatement pst = conn.prepareStatement(sql);84 pst.setString(1, user.getAccount());85 pst.setString(2, user.getPassword());86 pst.setString(3, user.getName());87 pst.setString(4, user.getInfo());88 pst.setInt(5, user.getId());89int count = pst.executeUpdate();90 pst.close();91return count > 0 ? true : false;92 } catch (SQLException e) {93 e.printStackTrace();94 }95return false;96 }9798 @Override99public User getById(Integer id) {100 User user = new User();101 Connection conn = DBUtil.getConnection();102 String sql = "select * from user where id = ?";103try {104 PreparedStatement pst = conn.prepareStatement(sql);105 pst.setInt(1, id);;106 ResultSet rst = pst.executeQuery();107while (rst.next()) {108 user.setId(rst.getInt("id"));109 user.setAccount(rst.getString("account"));110 user.setPassword(rst.getString("password"));111 user.setName(rst.getString("name"));112 user.setInfo(rst.getString("info"));113 user.setCreateTime(rst.getTimestamp("gmt_create"));114 user.setModifiedTime(rst.getTimestamp("gmt_modified"));115 }116 rst.close();117 pst.close();118 } catch (SQLException e) {119 e.printStackTrace();120 }121return user;122 }123124 }UserDaoImpl.java3.Service层1package service;23import java.util.List;45import er;67public interface UserService {89/** 显⽰所有⽤户 */10public List<User> listAll();1112/** 添加⼀个⽤户 */13public boolean add(User user);1415/** 根据id删除⼀个⽤户 */16public boolean deleteById(Integer id);1718/** 更新⼀个⽤户 */19public boolean update(User user);2021/** 根据id查找⼀个⽤户 */22public User getById(Integer id);2324 }UserService.java1package service.impl;23import java.util.List;45import erDao;6import erDaoImpl;7import er;8import erService;910public class UserServiceImpl implements UserService { 1112 @Override13public List<User> listAll() {14 UserDao userDao = new UserDaoImpl();15return userDao.listAll();16 }1718 @Override19public boolean add(User user) {20 UserDao userDao = new UserDaoImpl();21return userDao.add(user);22 }2324 @Override25public boolean deleteById(Integer id) {26 UserDao userDao = new UserDaoImpl();27return userDao.deleteById(id);28 }2930 @Override31public boolean update(User user) {32 UserDao userDao = new UserDaoImpl();33return userDao.update(user);34 }3536 @Override37public User getById(Integer id) {38 UserDao userDao = new UserDaoImpl();39return userDao.getById(id);40 }4142 }UserServiceImpl.java4.Controller层1package controller;3import java.io.IOException;4import java.util.List;56import javax.servlet.ServletException;7import javax.servlet.annotation.WebServlet;8import javax.servlet.http.HttpServlet;9import javax.servlet.http.HttpServletRequest;10import javax.servlet.http.HttpServletResponse;1112import er;13import net.sf.json.JSONArray;14import net.sf.json.JSONObject;15import erService;16import erServiceImpl;17import util.JSONUtil;1819 @WebServlet("/UserServlet")20public class UserServlet extends HttpServlet {2122private static final long serialVersionUID = 1L;2324public UserServlet() {25super();26 }2728protected void doGet(HttpServletRequest request, HttpServletResponse response) 29throws ServletException, IOException {30// 设置返回编码格式，解决中⽂乱码31 response.setCharacterEncoding("utf-8");3233// 根据action的值来执⾏不同的动作，例如显⽰所有⽤户或显⽰单个⽤户34 String action = request.getParameter("action");3536// 显⽰所有⽤户37if (action.equals("listAll")) {38 UserService userService = new UserServiceImpl();39 List<User> users = userService.listAll();4041// 返回JSON数据格式42 JSONArray jsonArr = JSONArray.fromObject(users);43 JSONObject jsonObjOut = new JSONObject();44 jsonObjOut.put("users", jsonArr);45 JSONUtil.returnJSON(request, response, jsonObjOut);46 }4748// 显⽰单个⽤户49if (action.equals("getById")) {50int id = Integer.parseInt(request.getParameter("id"));51 UserService userService = new UserServiceImpl();52 User user = userService.getById(id);5354// 返回JSON数据格式55 JSONObject jsonObjOut = new JSONObject();56 jsonObjOut.put("user", user);57 JSONUtil.returnJSON(request, response, jsonObjOut);58 }59 }6061protected void doPost(HttpServletRequest request, HttpServletResponse response) 62throws ServletException, IOException {63// 获取JSON数据64 JSONObject jsonObjIn = JSONUtil.getJSON(request, response);6566 User user = new User();67 user.setAccount(jsonObjIn.getString("account"));68 user.setPassword(jsonObjIn.getString("password"));69 user.setName(jsonObjIn.getString("name"));70 user.setInfo(jsonObjIn.getString("info"));7172 UserService userService = new UserServiceImpl();73boolean isSuccess = userService.add(user);7475// 返回JSON数据格式76 JSONObject jsonObjOut = new JSONObject();77 jsonObjOut.put("isSuccess", isSuccess);78 JSONUtil.returnJSON(request, response, jsonObjOut);79 }8081protected void doDelete(HttpServletRequest request, HttpServletResponse response) 82throws ServletException, IOException {83// 获取JSON数据84 JSONObject jsonObjIn = JSONUtil.getJSON(request, response);85int id = jsonObjIn.getInt("id");87 UserService userService = new UserServiceImpl();88boolean isSuccess = userService.deleteById(id);8990// 返回JSON数据格式91 JSONObject jsonObjOut = new JSONObject();92 jsonObjOut.put("isSuccess", isSuccess);93 JSONUtil.returnJSON(request, response, jsonObjOut);9495 }9697protected void doPut(HttpServletRequest request, HttpServletResponse response)98throws ServletException, IOException {99// 获取JSON数据100 JSONObject jsonObjIn = JSONUtil.getJSON(request, response);101102 User user = new User();103 user.setId(jsonObjIn.getInt("id"));104 user.setAccount(jsonObjIn.getString("account"));105 user.setPassword(jsonObjIn.getString("password"));106 user.setName(jsonObjIn.getString("name"));107 user.setInfo(jsonObjIn.getString("info"));108109 UserService userService = new UserServiceImpl();110boolean isSuccess = userService.update(user);111112// 返回JSON数据格式113 JSONObject jsonObjOut = new JSONObject();114 jsonObjOut.put("isSuccess", isSuccess);115 JSONUtil.returnJSON(request, response, jsonObjOut);116 }117118 }UserServlet.java5.View层1 <%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>2 <% String basePath = request.getScheme() + "://" + request.getServerName() + ":"3 + request.getServerPort() + request.getContextPath() + "/"; %>45<!Doctype html>6<html>7<head>8<base href="<%=basePath%>">9<title>⽤户管理</title>10<meta charset="utf-8">11<link rel="stylesheet" href="static/css/style.css">12<link rel="stylesheet" href="static/js/jquery-ui/jquery-ui.min.css">13<script src="static/js/jquery-3.3.1.min.js"></script>14<script src="static/js/jquery.serializejson.min.js"></script>15<script src="static/js/jquery-ui/jquery-ui.min.js"></script>16</head>17<body>18<!-- ⽤户列表 -->19<div class="tbl-title">⽤户列表</div>20<button onclick="showAddUserModal()">添加新的⽤户</button>21<table id="users" class="tbl-list">22<thead>23<tr>24<th>账户</th>25<th>密码</th>26<th>⽤户名</th>27<th>信息</th>28<th>操作</th>29</tr>30</thead>31<tbody>32</tbody>33</table>3435<!-- 添加⽤户模态框 -->36<div id="add-user-modal" title="添加⽤户" style="display:none;">37<form id="add-user-form">38<table class="modal-tbl">39<tr><td>账户</td><td><input type="text" name="account"></td></tr>40<tr><td>密码</td><td><input type="password" name="password"></td></tr>41<tr><td>姓名</td><td><input type="text" name="name"></td></tr>42<tr><td>信息</td><td><input type="text" name="info"></td></tr>43</table>44</form>45</div>4647<!--删除⽤户对话模态框 -->48<div id="delete-user-modal" title="删除⽤户" style="display:none;">49<p>确定删除该⽤户吗？</p>50</div>5152<!-- 更新⽤户模态框 -->53<div id="update-user-modal" title="更新⽤户" style="display:none;">54<form id="update-user-form">55<table class="modal-tbl">56<tr style="display: none"><td>ID</td><td><input type="text" name="id"></td></tr>57<tr><td>账户</td><td><input type="text" name="account"></td></tr>58<tr><td>密码</td><td><input type="password" name="password"></td></tr>59<tr><td>姓名</td><td><input type="text" name="name"></td></tr>60<tr><td>信息</td><td><input type="text" name="info"></td></tr>61</table>62</form>63</div>6465<!-- 提⽰信息模态框 -->66<div id="msg-modal" title="" style="display:none">67<p></p>68</div>6970<script>71// 开始72 $(function() {73 listAllUser();74 });7576// 显⽰所有⽤户77function listAllUser() {78 $.ajax({79 type: "GET",80 url: "UserServlet?action=listAll",81 dataType: "json",82 success: function(data) {83 $("#users tbody").empty(); // 每次载⼊前先清空显⽰区域，防⽌数据重复显⽰84var users = ers;85for (var i in users) {86var user = users[i];87var userStr = JSON.stringify(user);88 $("#users tbody").append('<tr><td>' + user.account + '</td>'89 + '<td>' + user.password + '</td>'90 + '<td>' + + '</td>'91 + '<td>' + + '</td>'92 + '<td><button onclick=\'showUpdateUserModal(' + userStr + ')\'>更新</button> '93 + '<button onclick="deleteUser(' + user.id + ')">删除</button></td></tr>');94 }95 },96 error: function() {97 console.log("ajax error");98 }99 });100 }101102// 显⽰添加⽤户模态框103function showAddUserModal() {104 $("#add-user-form")[0].reset(); // 每次载⼊前先清空表单，防⽌显⽰之前的信息105 $("#add-user-modal").dialog({106 resizable: false,107 modal: true,108 buttons: {109 "提交": function() {110 addUser();111 },112 "取消": function() {113 $(this).dialog("close");114 },115 },116 });117 }118119// 添加⽤户120function addUser() {121// 获取序列化表单信息122var user = $("#add-user-form").serializeJSON();123var userStr = JSON.stringify(user);124125 $.ajax({126 type: "POST",127 url: "UserServlet",128 data: userStr,129 dataType: "json",130 success: function(data) {131if (data.isSuccess) {132 $("#add-user-modal").dialog("close");133 showMsg('添加成功！');134 listAllUser();135 } else {136 $("#add-user-modal").dialog("close");137 showMsg('添加失败！');138 listAllUser();139 }140 },141 error: function() {142 console.log("ajax error");143 },144 });145 }146147// 删除⽤户148function deleteUser(id) {149// 将id封装为JSON格式数据150var data = {};151 data.id = id;152var dataStr = JSON.stringify(data);153// 显⽰删除⽤户模态框154 $("#delete-user-modal").dialog({155 resizable: false,156 modal: true,157 buttons: {158 "确认": function() {159 $.ajax({160 type: "DELETE",161 url: "UserServlet",162 data: dataStr,163 dataType: "json",164 success: function(data) {165if (data.isSuccess) {166 $("#delete-user-modal").dialog("close");167 showMsg('删除成功！');168 listAllUser();169 } else {170 $("#delete-user-modal").dialog("close");171 showMsg('删除失败！');172 listAllUser();173 }174 },175 error: function() {176 console.log("ajax error");177 },178 });179 },180 "取消": function() {181 $(this).dialog("close");182 },183 },184 });185 }186187//显⽰更新⽤户模态框188function showUpdateUserModal(user) {189 $("#update-user-form")[0].reset(); // 每次载⼊前先清空表单，防⽌显⽰之前的信息190// 表单赋值191 $("#update-user-form input[name='id']").val(user.id);192 $("#update-user-form input[name='account']").val(user.account);193 $("#update-user-form input[name='password']").val(user.password);194 $("#update-user-form input[name='name']").val();195 $("#update-user-form input[name='info']").val();196197 $("#update-user-modal").dialog({198 resizable: false,199 modal: true,200 buttons: {201 "提交": function() {202 updateUser();203 },204 "取消": function() {205 $(this).dialog("close");206 },207 },208 });209 }210211// 更新⽤户212function updateUser() {213// 获取序列化表单信息214var user = $("#update-user-form").serializeJSON();215var userStr = JSON.stringify(user);216217 $.ajax({218 type: "PUT",219 url: "UserServlet",220 data: userStr,221 contentType: 'application/json;charset=utf-8',222 dataType: "json",223 success: function(data) {224if (data.isSuccess) {225 $("#update-user-modal").dialog("close");226 showMsg('更新成功！');227 listAllUser();228 } else {229 $("#update-user-modal").dialog("close");230 showMsg('更新失败！');231 listAllUser();232 }233 },234 error: function() {235 console.log("ajax error");236 },237 });238 }239240//显⽰提⽰信息241function showMsg(text) {242 $("#msg-modal p").text(''); // 每次载⼊前先清空显⽰区域，防⽌显⽰之前的信息243 $("#msg-modal p").text(text);244 $("#msg-modal").dialog({245 modal: true,246 });247// 2s后消失248 setTimeout(function() {249 $("#msg-modal").dialog("close")250 },2000);251 }252</script>253</body>254</html>admin_user.jsp1@charset "utf-8";23.tbl-title {4 margin: 10px 0;5 font-size: 24px;6 }78.tbl-list {9 margin: 10px 0;10 border: 1px solid #000000;11 border-collapse: collapse;12 }1314.tbl-list th, .tbl-list td {15 padding: 5px;16 border: 1px solid #000000;17 }1819.modal-tbl{}style.cssjs相关下载：链接：提取码：ubt06.⼯具类1package util;23import java.sql.Connection;4import java.sql.DriverManager;56public class DBUtil {78private static String Driver = "com.mysql.jdbc.Driver";9private static String url = "jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf8";10private static String user = "root";11private static String psd = "123456";12private static Connection conn = null;1314// 连接数据库15public static Connection getConnection() {16if (conn == null) {17try {18 Class.forName(Driver);19 conn = DriverManager.getConnection(url, user, psd);20 System.out.println("开始数据库连接");21 } catch (Exception e) {22 e.printStackTrace();23 }24 }25return conn;26 }2728// 关闭数据库连接29public static void CloseConnection() {30if (conn != null) {31try {32 conn.close();33 System.out.println("关闭数据库连接");34 } catch (Exception e) {35 e.printStackTrace();36 }37 }38 }39 }DBUtil.java1package util;23import java.io.BufferedReader;4import java.io.IOException;5import java.io.PrintWriter;67import javax.servlet.ServletException;8import javax.servlet.http.HttpServletRequest;9import javax.servlet.http.HttpServletResponse;1011import net.sf.json.JSONObject;1213public class JSONUtil {1415// 从输⼊流中获取JSON数据16public static JSONObject getJSON (HttpServletRequest request, HttpServletResponse response)17throws ServletException, IOException {18// 输⼊流19 StringBuffer sb = new StringBuffer();20 String line = null;21 BufferedReader br = request.getReader();22while ((line = br.readLine()) != null) {23 sb.append(line);24 }25// 返回JSONObject26 String jsonStr = sb.toString();27 JSONObject jsonObj = JSONObject.fromObject(jsonStr);28return jsonObj;29 }3031// 返回JSON格式的数据32public static void returnJSON (HttpServletRequest request, HttpServletResponse response, JSONObject jsonObj) 33throws ServletException, IOException {34// 设置编码格式，解决乱码35 response.setCharacterEncoding("utf-8"); 3637 PrintWriter out = response.getWriter() ;38 out.write(jsonObj.toString());39 out.flush();40 out.close();41 }4243 }JSONUtil.java7.所需要的jar百度云下载地址：提取码：f1gu三、实现效果1.显⽰所有⽤户2.添加⽤户3.修改⽤户4.删除⽤户。
JavaScript实现的checkbox经典实例分享
JavaScript实现的checkbox经典实例分享JavaScript 实现的checkbox经典实例分享<!DOCTYPE html><html><head><meta charset="UTF-8"><title>邮件删除</title><style type="text/css">*{margin: 0;padding: 0;}table{width: 400px;margin-left:200px;margin-top:20px;font-weight: bold;}th,td{padding: 7px;}#topOne{width: 80px;padding: 10px;}#topTwo{width: 120px;text-align: center;}#topThree{width: 200px;text-align: center;}#endColspan{text-align: center;}#endColspan input{margin: 0 5px;}</style></head><body><table border="2" cellspacing="0" cellpadding=""><!--第⼀⾏--><tr id="top"><td id="topOne"><input type="checkbox" id="allInpTop" value="" /><span id="allSpanTop">全选</span></td><td id="topTwo">选择路线</td><td id="topThree">请选择英雄</td></tr><!--第⼆⾏--><tr id="content1"><td id="contentOne1"><input type="checkbox" name="" id="contentOne_input1" value="" /></td><td id="contentTwo1">上单</td><td id="contentThree1">德玛</td></tr><tr id="content2"><td id="contentOne2"><input type="checkbox" name="" id="contentOne_input2" value="" /></td><td id="contentTwo2">中单</td><td id="contentThree2">安妮</td></tr><tr id="content3"><td id="contentOne3"><input type="checkbox" name="" id="contentOne_input3" value="" /></td><td id="contentTwo3">打野</td><td id="contentThree3">螳螂</td></tr><!--第三⾏--><tr id="end"><td id="endOne"><input type="checkbox" id="endOne_input" value="" /><span id="endOne_span">全选</span></td><td id="endColspan" colspan="2"><input type="button" name="" id="endColspan_btn1" value="全选" /><input type="button" name="" id="endColspan_btn2" value="取消全选" /><input type="button" name="" id="endColspan_btn3" value="反选" /><input type="button" name="" id="endColspan_btn4" value="删除所选邮件" /></td></tr></table></body><script type="text/javascript">var allInpTopObj = document.getElementById("allInpTop");var endOne_input = document.getElementById("endOne_input");var content1Obj = document.getElementById("content1");var content2Obj = document.getElementById("content2");var content3Obj = document.getElementById("content3");var contentOne_inputObj1 = document.getElementById("contentOne_input1");var contentOne_inputObj2 = document.getElementById("contentOne_input2");var contentOne_inputObj3 = document.getElementById("contentOne_input3");var endColspan_btn1Obj = document.getElementById("endColspan_btn1");var endColspan_btn2Obj = document.getElementById("endColspan_btn2");var endColspan_btn3Obj = document.getElementById("endColspan_btn3");var endColspan_btn4Obj = document.getElementById("endColspan_btn4");var luxianObj = document.getElementById("luxian");var renwuObj = document.getElementById("renwu");var strInput = [contentOne_inputObj1,contentOne_inputObj2,contentOne_inputObj3,allInpTopObj,endOne_input]; var checks = [contentOne_inputObj1,contentOne_inputObj2,contentOne_inputObj3];var s = [content1Obj,content2Obj,content3Obj];var bool = true;var num;function pandaunFun () {if (allInpTopObj.checked = true) {allInpTopObj.checked = false;}if (endOne_input.checked = true) {endOne_input.checked = false;}}function allFun () {for (var i = 0; i < strInput.length; i++) {strInput[i].checked = true;//选中}}function cancelFun () {for (var i = 0; i < strInput.length; i++) {strInput[i].checked = false;//选中}}function unAllFun () {for (var i = 0; i < strInput.length; i++) {if (strInput[i].checked == true) {strInput[i].checked = false;//⾮选中} else{strInput[i].checked = true;//选中}}pandaunFun ();}function deleteFun () {for (var i = 0; i < s.length; i++) {if (checks[i].checked) {s[i].style.display = "none";}}pandaunFun ();}function numCheckFun () {num = 0;for (var j = 0; j < checks.length; j++) {if (checks[j].checked) {num++;}}if (num == checks.length) {allInpTopObj.checked = true;endOne_input.checked = true;}else{allInpTopObj.checked = false;endOne_input.checked = false;}}endColspan_btn1Obj.onclick = allFun;endColspan_btn2Obj.onclick = cancelFun; endColspan_btn3Obj.onclick = unAllFun; endColspan_btn4Obj.onclick = deleteFun; for (var i = 0; i < checks.length; i++) {checks[i].onclick = numCheckFun;}</script></html>。
使用AJAX实现数据的增删改查
使⽤AJAX实现数据的增删改查主页：index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="/jquery/2.1.4/jquery.min.js"></script></head><body>编号：<input type="text" value="" id="pno"/><br>姓名：<input type="text" value="" id="name"/><br>性别：男：<input type="radio" name="sex" value="男">⼥：<input type="radio" name="sex" value="⼥"><br>年龄：<select id="age"><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option></select><br>⾝⾼：<input type="text" value="" id="height"/><br>体重：<input type="text" value="" id="weight"/><br><input type="button" value="插⼊" id="btn_1" onclick="submit()"/><br><br><br>编号：<input type="text" value="" id="pno_query"/><input type="button" value="查询" id="btn_2" onclick="query()"/><table id="queryResult"><tr><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td><td>⾝⾼</td><td>体重</td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr></table><br><br><br>编号：<input type="text" value="" id="pno_del"/><input type="button" value="删除" id="btn_3" onclick="del()"/><br><br><br>编号：<input type="text" value="" id="pno_up"/><br>姓名：<input type="text" value="" id="name_up"/><br>性别：男：<input type="radio" name="sex_up" value="男">⼥：<input type="radio" name="sex_up" value="⼥"><br>年龄：<select id="age_up"><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option></select><br>⾝⾼：<input type="text" value="" id="height_up"/><br>体重：<input type="text" value="" id="weight_up"/><br><input type="button" value="更新" id="btn_4" onclick="update()"/></body><script type="text/javascript">/*var x = $("#queryResult").html();for(var i=0; i < 20 ; i++) {x += '<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>';}$("#queryResult").html(x);*/function submit() {var pno = $("#pno").val();var name = $("#name").val();var sex = $('input[name="sex"]:checked').val();var age = $("#age").val();var height = $("#height").val();var weight = $("#weight").val();var data={"pno":pno,"name":name,"sex":sex,"age":age,"height":height,"weight" : weight}$.ajax({type : "post",url : "Hello",data : data,cache : true,async : true,success: function (data ,textStatus, jqXHR){if(data.code == 200){alert("插⼊成功了");}else{alert(data.message);}},error:function (XMLHttpRequest, textStatus, errorThrown) { alert(typeof(errorThrown));}});}function query() {var pno = $("#pno_query").val();var str = ["编号","姓名","性别","年龄","⾝⾼","体重"];$.ajax({type : "post",url : "HelloQuery",data : {"pno": pno},cache : true,async : true,success: function (data ,textStatus, jqXHR){//data = $.parseJSON(data);var j = 0;var x = 1;//for(var i=1; i <20; i++) {for(var p in data){//遍历json对象的每个key/value对,p为key console.log(data[p]);if(j == 6) {j = 0;x++;}$("#queryResult tr:eq("+x+") td:eq("+j+")").html(data[p]); console.log(data[p]);j++;}//}},error:function (XMLHttpRequest, textStatus, errorThrown) { alert(typeof(errorThrown));}});}function del() {var pno = $("#pno_del").val();$.ajax({type : "post",url : "HelloDelete",data : {"pno": pno},cache : true,async : true,success: function (data ,textStatus, jqXHR){if(data.code == 200){alert("删除成功了");}else{alert(data.message);}},error:function (XMLHttpRequest, textStatus, errorThrown) {alert(typeof(errorThrown));}});}function update() {var pno = $("#pno_up").val();var name = $("#name_up").val();var sex = $('input[name="sex_up"]:checked').val();var age = $("#age_up").val();var height = $("#height_up").val();var weight = $("#weight_up").val();var data={"pno":pno,"name":name,"sex":sex,"age":age,"height":height,"weight" : weight}$.ajax({type : "post",url : "HelloUpdate",data : data,cache : true,async : true,success: function (data ,textStatus, jqXHR){if(data.code == 200){alert("更新成功了");}else{alert(data.message);}},error:function (XMLHttpRequest, textStatus, errorThrown) {alert(typeof(errorThrown));}});}</script></html>增加的Serlvet：Hello.javapackage com.web;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.mysql.MysqlUtil;/*** Servlet implementation class Hello*/@WebServlet("/Hello")public class Hello extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public Hello() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8");response.setContentType("application/json; charset=utf-8");String pno = request.getParameter("pno");String name = request.getParameter("name");String sex = request.getParameter("sex");String age = request.getParameter("age");String height = request.getParameter("height");String weight = request.getParameter("weight");String sqlInsert = "INSERT INTO Person (Pno,Pname,Psex,Page,Pheight,Pweight) VALUES('";sqlInsert += pno +"','";sqlInsert += name +"','";sqlInsert += sex +"',";sqlInsert += age +",";sqlInsert += height +",";sqlInsert += weight +")";int message = MysqlUtil.add(sqlInsert);String rep = "";if(message == 1) {rep = "{\"code\":200,\"message\":\"成功插⼊数据库\"}";}else {rep = "{\"code\":\"999\",\"message\":\"插⼊失败了\"}";}response.getWriter().write(rep);}}删除的Servlet：HelloDelete.javapackage com.web;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.mysql.MysqlUtil;/*** Servlet implementation class HelloDelete*/@WebServlet("/HelloDelete")public class HelloDelete extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public HelloDelete() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8");response.setContentType("application/json; charset=utf-8");String pno = request.getParameter("pno");String sqlDel = "delete from Person where pno="+pno;int message = MysqlUtil.del(sqlDel);String rep = "";if(message == 1) {rep = "{\"code\":\"200\",\"message\":\"成功删除\"}";}else {rep = "{\"code\":\"999\",\"message\":\"删除失败\"}";}response.getWriter().write(rep);}}更新的Servlet：HelloUpdate.javapackage com.web;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.mysql.MysqlUtil;/*** Servlet implementation class HelloUpdate*/@WebServlet("/HelloUpdate")public class HelloUpdate extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public HelloUpdate() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8");response.setContentType("application/json; charset=utf-8");String pno = request.getParameter("pno");String name = request.getParameter("name");String sex = request.getParameter("sex");String age = request.getParameter("age");String height = request.getParameter("height");String weight = request.getParameter("weight");String sqlupdate = "update Person set ";// sqlupdate += "Pno='"+ pno +"',";sqlupdate += "Pname='"+ name +"',";sqlupdate += "Psex='"+ sex +"',";sqlupdate += "Page="+ age +",";sqlupdate += "Pheight="+ height +",";sqlupdate += "Pweight="+ weight;sqlupdate += " where Pno='"+pno+"'";System.out.println(sqlupdate);int message = MysqlUtil.update(sqlupdate);String rep = "";if(message == 1) {rep = "{\"code\":\"200\",\"message\":\"成功插⼊数据库\"}";}else {rep = "{\"code\":\"999\",\"message\":\"插⼊失败了\"}";}response.getWriter().write(rep);}}查询的Servlet：HelloQuery.javapackage com.web;import java.io.IOException;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.mysql.MysqlUtil;/*** Servlet implementation class HelloQuery*/@WebServlet("/HelloQuery")public class HelloQuery extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public HelloQuery() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setCharacterEncoding("utf-8");response.setContentType("application/json; charset=utf-8");String pno = request.getParameter("pno");String[] params = {"Pno","Pname","Psex","Page","Pheight","Pweight"}; String sql = "select * from Person where Pno="+pno;String data = "{";String[] str = {"编号","姓名","性别","年龄","⾝⾼","体重"};List<Map<String,String>> listmap = new ArrayList<>();listmap = MysqlUtil.show(sql, params);for(int i =0 ; i<listmap.size();i++) {for(int j=0 ; j<listmap.get(i).size();j++) {data += "\""+str[j]+"\":"+"\""+listmap.get(i).get(params[j])+"\",";}}data = data.substring(0, data.length()-1);data += "}";System.out.println(data);response.getWriter().write(data);}}页⾯如下：。
JSP页面实现批量删除数据
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
/**
* Servlet实现类UpdateServlet
*/
@WebServlet("/DelServlet") //配置Servlet
public class DelServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
}
bookList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.mingrisoft.BookBean"%>
try {
Class.forName("com.mysql.jdbc.Driver"); //加载数据库驱动，注册到驱动管理器
String url = "jdbc:mysql://localhost:3306/db_book";//数据库连接字符串
jQuery实现点击行选中或取消CheckBox的方法
jQuery实现点击⾏选中或取消CheckBox的⽅法本⽂实例讲述了jQuery实现点击⾏选中或取消CheckBox的⽅法。
分享给⼤家供⼤家参考，具体如下：/// <summary>/// 点击⾏选中或者取消CheckBox/// </summary>/// <param name="TableID">表ID</param>function SetCheckBox_Check(TableID) {var $TableID = TableID == "" ? "#tb_List" : "#" + TableID + "";//循环每个tr⾏，添加click事件$($TableID).find("tr").live("click", function () {//标题⾏不作任何操作if (this.rowIndex == 0) return;if ($(this).find("input").attr("checked") == 'checked') {//已选中的⾏取消选中$(this).find("input").attr("checked", false);} else {//未选中的⾏，进⾏选中$(this).find("input").attr("checked", true);}});}更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。
基于JavaScript实现复选框的全选和取消全选
基于JavaScript实现复选框的全选和取消全选本⽂实例为⼤家分享了js复选框的全选和取消全选的具体代码，供⼤家参考，具体内容如下效果图：测试代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>li{list-style: none;}</style></head><body><div class="first"><ul class="frtInfo"><li class="same"><label><input type="checkbox" name="wp" value="wpa"/>液体</label></li><li class="same"><label><input type="checkbox" name="wp" value="wpb"/>粉末</label></li><li class="same"><label><input type="checkbox" name="wp" value="wpc"/>仿牌</label></li><li class="same"><label><input type="checkbox" name="wp" value="wpd"/>纯电池</label></li><li class="same"><label><input type="checkbox" name="wp" value="wpe"/>危险品</label></li><li class="same"><label><input type="checkbox" name="wp" value="wpd"/>配套电池</label></li><li class="same select"><label><input id="allChecked" class="allChk" type="button" name="sel" value="全选/取消" onclick="selectAllDels()"/></label> </li></ul></div><script src="../js/jquery-1.11.3.js"></script><script type="text/javascript">/*全选或取消全选*/function selectAllDels(){var allWp=document.getElementsByName("wp");var selOrUnsel=false;for(var i=0; i<allWp.length;i++){if(allWp[i].checked){selOrUnsel=true;break;}}if (selOrUnsel){allUnchk(allWp);}else{allchk(allWp);}}function allchk(allWp){for(var i=0; i<allWp.length;i++ ){allWp[i].checked=true;}}function allUnchk(allWp){for(var i=0; i<allWp.length;i++){allWp[i].checked=false;}}</script></body></html>直接复制代码可⽤。
Javascript技巧：列表CheckBox全选
Javascript技巧：列表CheckBox全选最近做公司内的一个小项目，需要做一个多选项目的删除功能，于是写以下JS脚本例子来实现，其实也是经常用到的比较基础的东西，高手就不用看了。
程序代码：<script language="javascript"><!--function CA（frm）{var trk=0;for （var i=0;i<frm.elements.length;i++）{var e=frm.elements[i];if （（ != 'allbox'）&& （e.type=='checkbox'）&& （ != '不想被选中的checkbox的名称'））{trk++;e.checked=frm.allbox.checked;frm.del.disabled = frm.allbox.checked?false:true;//全选对删除按钮的disabled属性的影响}}}function CCA（frm,CB）{var TB=TO=0;for （var i=0;i<frm.elements.length;i++）{var e=frm.elements[i];if （（ != 'allbox'）&& （e.type=='checkbox'）&& （ != '不想被选中的checkbox的名称'））{TB++;if （e.checked）TO++;}}frm.allbox.checked=（TO==TB）？true:false;if （0==TO）//全部未选中和选中一些时对删除按钮的disabled属性的影响{frm.del.disabled = true;}else{frm.del.disabled = false;}}--></script>调用方法：全选的名称定为allbox，onclick事件执行CA（this.form）；选择项的checbox的onclick事件执行CCA（this.form,this）；。
JSP增删改参考代码
示例数据库：数据库名:new数据库字段及属性：示例目录结构：src文件夹下：dao包：（1） BaseDao.java ——加载驱动，建立数据库连接，关闭操作对象（2）表名Dao.java ——Java处理程序，例如：增删改查这样的方法写在这个类中entity包：表名.java ——实体类，一个表是一个实体，把表中的列作为实体的属性、并生成get、set方法及带参数和无参数的构造方法WebRoot文件夹下：JSP页面示例代码：BaseDao.javapackage dao;//要导入Java.sql包，才可以应用Connection、PreparedStatement、ResultSetimport java.sql.*;public class BaseDao {/*** 静态块，加载驱动SQL Server 2005 驱动，前提需导入SQL Server 2005 的JAR包*/static{try {Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");} catch (ClassNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();}}/*** 获得数据库连接* @return conn*/public static Connection getConnection(){Connection conn = null;try {conn =DriverManager.getConnection ("jdbc:sqlserver://localhost:1433;DatabaseName=new", "sa", "sa"); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }//返回数据库连接对象 return conn;} /*** 关闭操作对象，需注意关闭顺序* @param rs ResultSet 对象，用来存储查询执行后的结果 * @param pStmt PreparedStatement 对象，用来执行SQL 命令 * @param conn Connection 对象，用来建立数据库连接 */ public static void closeAll(ResultSet rs,PreparedStatement pStmt,Connection conn){if(rs != null ){rs.close();}if(pStmt != null ){pStmt.close(); }if(conn != null ){conn.close(); }}}FirstTitleDao.java /*** 显示列表,查询时使用 */public static List getList(){ //创建Connection 对象 Connection conn=null;//定义PreparedStatement 对象 PreparedStatement stmt=null;//创建ResultSet 对象ResultSet rs=null;//创建列表List list=new ArrayList();try {//获得数据库连接conn=BaseDao.getConnection();//创建PreparedStatement对象stmt=conn.prepareStatement("select * from FirstTitle");//执行SQL语句，返回ResultSet对象rs=stmt.executeQuery();//操作结果集while(rs.next()){entity.FirstTitle title = new FirstTitle();//将结果集中的数据设置到对象中Array title.setId(rs.getInt(1));title.setTitleName(rs.getString(2));title.setCreator(rs.getString(3));title.setCreateTime(rs.getString(4));//将对象添加到列表中list.add(title);}} catch (SQLException e) {// TODO 自动生成 catch 块e.printStackTrace();}finally{//关闭操作对象BaseDao.closeAll(rs, stmt, conn);}//返回列表return list;}/***向数据库中插入数据*/public static void add(entity.FirstTitle title){Connection con = null;PreparedStatement pStmt = null;ResultSet rs = null;try {con = dao.BaseDao.getConnection();pStmt = con.prepareStatement("insert into FirstTitle(Id,TitleName,Creator,CreateTime) values(?,?,?,?)");pStmt.setInt(1, title.getId());pStmt.setString(2, title.getTitleName()); pStmt.setString(3, title.getCreator()); pStmt.setString(4, title.getCreateTime()); //执行SQL 语句，返回受影响的行数（int 类型） pStmt.executeUpdate(); } catch (SQLException e) { // TODO 自动生成 catch 块 e.printStackTrace();}}/** * 删除 */public static void delete(int id){ Connection con = null ;PreparedStatement pStmt = null ; ResultSet rs = null ; try { con = dao.BaseDao.getConnection ();pStmt = con.prepareStatement("delete from FirstTitle where id=?"); pStmt.setInt(1, id); pStmt.executeUpdate(); } catch (SQLException e) {// TODO 自动生成 catch 块 e.printStackTrace();}finally { dao.BaseDao.closeAll (rs, pStmt, con); }} /*** 修改,根据ID 返回实体 */public static entity.FirstTitle getModel(int id){ //创建操作对象Connection con = null ;PreparedStatement pStmt = null ; ResultSet rs = null ; try { //获得数据库连接con = dao.BaseDao.getConnection();//创建prepareStatement对象pStmt = con.prepareStatement("select * from FirstTitle where id=?");//设置参数pStmt.setInt(1, id);//执行SQL语句返回结果集rs = pStmt.executeQuery();//操作结果集if(rs.next()){//创建实体类的对象，并赋值entity.FirstTitle title = new FirstTitle();title.setId(rs.getInt(1));title.setTitleName(rs.getString(2));title.setCreator(rs.getString(3));title.setCreateTime(rs.getString(4));}} catch (SQLException e) {// TODO自动生成 catch 块e.printStackTrace();}finally{dao.BaseDao.closeAll(rs, pStmt, con);}return title;}/***修改方法*/public static void update(entity.FirstTitle title){Connection con = null;PreparedStatement pStmt = null;ResultSet rs = null;try {con = dao.BaseDao.getConnection();pStmt = con.prepareStatement("update FirstTitle set ID=?,TitleName=?,Creator=?,CreateTime=? where id=?");pStmt.setInt(1, title.getId());pStmt.setString(2, title.getTitleName());pStmt.setString(3, title.getCreator());pStmt.setString(4, title.getCreateTime());pStmt.setInt(5, title.getId());pStmt.executeUpdate();} catch (SQLException e) {// TODO自动生成 catch 块e.printStackTrace();}finally{dao.BaseDao.closeAll(rs, pStmt, con);}}WebRoot文件夹下的页面：index.jsp中显示列表部分：<%//获得列表List list = FirstTitleDao.getList();//循环列表，并获得列表中的对象。