jQuery 实现表格增删改
今天来吧前天的坑补一下
利用 jQuer Dom操作实现表格增删改
增删写在了前天，可以点击这个链接去查看
jQuery Dom增删
不想点击链接的话我把全部内容放到最后
做了一点点小修改，大家可以直接看最后的完整代码
查看完整代码
话不多说，放后续代码
//====修改--点击修改时--将所有值返回到表单中
{
//需要用到事件委派,这就是未来事件
$( "#tbody" ).on( "click","#change",function(){
//获取触发事件按钮的父级的父级的jq对象，也就是那个tr
var trDom=$( this ).parent().parent();
// console.log( trDom )
//获取tr的所有子级jq
var tds=trDom.children();
// console.log( tds )
//获取文本框的值并返回到表单中
//给val值换为对应的修改按钮的值，tds中下标为1的一项的文本值,如果写 val 值的话，会清空文本框
//注，下标获取tds 的子级是 js 形式，需要转换成jq
// console.log( tds[1] )
$( "#user" ).val( $( tds[1] ).text() )
//获取单选框的值并返回到表单中
//利用 each 循环+if条件
// console.log( $( "form :radio" ) )// 获取所有的单选框
$( "#form :radio" ).each( function( i,v ){
//表单中的 单选 jq对象循环
//如果表单中的值 等于 点击按钮时的对应的单选 值，则
if( $( v ).val()==$( tds[2] ).text() ){
$( v ).prop( "checked",true )
}else{
$( v ).prop( "checked",false )
}
} )
//获取复选框的值并返回到表单中
// console.log( tds[3] )
//获取复选框的值,用逗号分隔
var hobby=$( tds[3] ).text().split(",")
// console.log( hobby );
//默认让所有的多选框取消选中
$( "#form :checkbox" ).each( function( i,v ){
// console.log( v );
//转换为 jQ 取消选中
$( v ).prop( "checked",false )
} )
//利用循环添加选中
//此循环用于确定多选值的数量，以便确定选定的多选框个数
for( let i=0;i<hobby.length;i++ ){
//此循环确定谁被选中
$( "#form :checkbox" ).each( function( j,v ){
//如果 目标多选框中的值==表单中多选框中的值，则让其选中
if( hobby[i]==$( v ).val() ){
// console.log( hobby )
// console.log( $( v ).val() )
$( v ).prop( "checked",true )
}
} )
}
//获取下拉框的值并返回至表单
//还是利用循环，
//下拉列表的所有子级，
$( "#sel" ).children().each( function( i,v ){
//如果下拉列表中的某一项的值等于 修改按钮对应的值，则让其选中
if( $( v ).val()==$( tds[4] ).text() ){
$( v ).prop( "selected",true )
}else{
//符合条件的就一项，所以其他子级就不选中
$( v ).prop( "selected",false )
}
} )
//获取文本域的值并返回至表单
//直接让文本的值等于 对应按钮的文本域文本值
$( "#txt" ).val( $( tds[5] ).text() )
//获取序号中的值添加到下方，方便下面的确认修改
$( "#sort" ).val( $( tds[0] ).text() )
//点击时，弹出确认修改按钮，并隐藏提交按钮
$( "#change2" ).show();
$( "#btn" ).hide();
} )
}
//============确认修改
{
//添加点击事件
$( "#change2" ).on( "click",function(){
//点击时，隐藏确认修改按钮，并显示提交按钮
$( "#btn" ).show();
$( "#change2" ).hide();
//点击时，将表单中的值再写入表格中
//再获取一遍上面的值，可以封装
var user=$( "#user" ).val();
var sex=$( "#form :radio:checked").val()
var fuXuan=$( "#form :checkbox:checked" )
var hobby=[];
fuXuan.each( function( i,v ){
hobby.push( $( v ).val() )
} )
var address=$( "#sel :selected" ).val();
var txt=$( "#txt" ).val()
//创建tr,对应的修改按钮对应的tr，并修改值
//建议使用序号来获取对应的tr
//此处 -1 是因为序号从1开始，下标对应的和序号差一
var index=$( "#sort" ).val()-1
var tr=$( "#tbody tr" ).eq( index ).children();
//修改值
$( tr[0] ).text();
$( tr[1] ).text(user);
$( tr[2] ).text(sex);
$( tr[3] ).text(hobby);
$( tr[4] ).text(address);
$( tr[5] ).text(txt);
} )
}
回到顶部
查看完整代码
html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./jquery-3.5.1.js">script>
<style>
#change2{
display: none;
}
style>
head>
<body>
<form id="form">
<input type="text" placeholder="请输入姓名" id="user"><br/>
<div>
<label for="boy">男label>
<input type="radio" name="sex" id="boy" value="男" checked>
<label for="girl">女label>
<input type="radio" name="sex" id="girl" value="女">
div>
<div>
<label for="study">学习label>
<input type="checkbox" name="" id="study" value="学习">
<label for="music">听音乐label>
<input type="checkbox" name="" id="music" value="听音乐">
<label for="lol">打游戏label>
<input type="checkbox" name="" id="lol" value="打游戏">
div>
<div>
<select name="" id="sel">
<option value="山西">山西option>
<option value="天津">天津option>
<option value="上海">上海option>
<option value="北京">北京option>
select>
div>
<textarea name="" id="txt" cols="30" rows="10">textarea>
<div>
<input type="text" id="sort" placeholder="序号" value="">
div>
<div>
<input type="button" value="提交" id="btn">
div>
<input type="button" value="确认修改" id="change2">
form>
<table>
<thead>
<tr>
<th>序号th>
<th>姓名th>
<th>性别th>
<th>爱好th>
<th>住址th>
<th>介绍th>
<th>操作th>
tr>
thead>
<tbody id="tbody">
tbody>
table>
<script src="./work_09_js.js">script>
body>
html>
回到顶部
JavaScript代码
//====点击提交时，获取所有值，并显示表格中
{
var n=0
$( "#btn" ).on( "click",function(){
n++
//姓名--文本框
var user=$( "#user" ).val();
// console.log( user );
//性别--单选框
var sex=$( "#form :radio:checked").val()
// console.log( sex )
//爱好--多选框
var fuXuan=$( "#form :checkbox:checked" )
var hobby=[];
fuXuan.each( function( i,v ){
hobby.push( $( v ).val() )
// console.log( v )
} )
// console.log( hobby )
//地区--下拉框
var address=$( "#sel :selected" ).val();
// console.log( address );
//介绍--文本域
var txt=$( "#txt" ).val()
// console.log( txt )
//创建表格
var trDom=$( `
${
n }
${
user }
${
sex }
${
hobby }
${
address }
${
txt }
` )
//添加
$( "#tbody" ).append( trDom );
} )
}
//====删除
{
//需要用到事件委派,这就是未来事件
$( "#tbody" ).on( "click","#del",function(){
//父级的父级
$( this ).parent().parent().remove()
} )
}
//====修改--点击修改时--将所有值返回到表单中
{
//需要用到事件委派,这就是未来事件
$( "#tbody" ).on( "click","#change",function(){
//获取触发事件按钮的父级的父级的jq对象，也就是那个tr
var trDom=$( this ).parent().parent();
// console.log( trDom )
//获取tr的所有子级jq
var tds=trDom.children();
// console.log( tds )
//获取文本框的值并返回到表单中
//给val值换为对应的修改按钮的值，tds中下标为1的一项的文本值,如果写 val 值的话，会清空文本框
//注，下标获取tds 的子级是 js 形式，需要转换成jq
// console.log( tds[1] )
$( "#user" ).val( $( tds[1] ).text() )
//获取单选框的值并返回到表单中
//利用 each 循环+if条件
// console.log( $( "form :radio" ) )// 获取所有的单选框
$( "#form :radio" ).each( function( i,v ){
//表单中的 单选 jq对象循环
//如果表单中的值 等于 点击按钮时的对应的单选 值，则
if( $( v ).val()==$( tds[2] ).text() ){
$( v ).prop( "checked",true )
}else{
$( v ).prop( "checked",false )
}
} )
//获取复选框的值并返回到表单中
// console.log( tds[3] )
//获取复选框的值,用逗号分隔
var hobby=$( tds[3] ).text().split(",")
// console.log( hobby );
//默认让所有的多选框取消选中
$( "#form :checkbox" ).each( function( i,v ){
// console.log( v );
//转换为 jQ 取消选中
$( v ).prop( "checked",false )
} )
//利用循环添加选中
//此循环用于确定多选值的数量，以便确定选定的多选框个数
for( let i=0;i<hobby.length;i++ ){
//此循环确定谁被选中
$( "#form :checkbox" ).each( function( j,v ){
//如果 目标多选框中的值==表单中多选框中的值，则让其选中
if( hobby[i]==$( v ).val() ){
// console.log( hobby )
// console.log( $( v ).val() )
$( v ).prop( "checked",true )
}
} )
}
//获取下拉框的值并返回至表单
//还是利用循环，
//下拉列表的所有子级，
$( "#sel" ).children().each( function( i,v ){
//如果下拉列表中的某一项的值等于 修改按钮对应的值，则让其选中
if( $( v ).val()==$( tds[4] ).text() ){
$( v ).prop( "selected",true )
}else{
//符合条件的就一项，所以其他子级就不选中
$( v ).prop( "selected",false )
}
} )
//获取文本域的值并返回至表单
//直接让文本的值等于 对应按钮的文本域文本值
$( "#txt" ).val( $( tds[5] ).text() )
//获取序号中的值添加到下方，方便下面的确认修改
$( "#sort" ).val( $( tds[0] ).text() )
//点击时，弹出确认修改按钮，并隐藏提交按钮
$( "#change2" ).show();
$( "#btn" ).hide();
} )
}
//============确认修改
{
//添加点击事件
$( "#change2" ).on( "click",function(){
//点击时，隐藏确认修改按钮，并显示提交按钮
$( "#btn" ).show();
$( "#change2" ).hide();
//点击时，将表单中的值再写入表格中
//再获取一遍上面的值，可以封装
var user=$( "#user" ).val();
var sex=$( "#form :radio:checked").val()
var fuXuan=$( "#form :checkbox:checked" )
var hobby=[];
fuXuan.each( function( i,v ){
hobby.push( $( v ).val() )
} )
var address=$( "#sel :selected" ).val();
var txt=$( "#txt" ).val()
//创建tr,对应的修改按钮对应的tr，并修改值
//建议使用序号来获取对应的tr
//此处 -1 是因为序号从1开始，下标对应的和序号差一
var index=$( "#sort" ).val()-1
var tr=$( "#tbody tr" ).eq( index ).children();
//修改值
$( tr[0] ).text();
$( tr[1] ).text(user);
$( tr[2] ).text(sex);
$( tr[3] ).text(hobby);
$( tr[4] ).text(address);
$( tr[5] ).text(txt);
} )
}
回到顶部
有耐心的人一定会看懂的！！
今天就到这里，拜拜~