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" )