jquery给表格绑值

  • 直接上代码了

      <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>后台管理系统文件服务器配置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/fenye.css" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <link rel="stylesheet" href="../css/backStage.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/card.js"></script>
    <script type="text/javascript" src="../js/index_Click.js"></script>
    <script src="../js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/quanxuan.js"></script>
    <script>
    var ComputerIP = "192.168.1.10"; function getJson() {
    var str;
    var pageCount;
    var pageIndex = $("#pageIndex").val();
    var fileDomain = $("#fileDomain").val();
    var fileIp = $("#fileIp").val();
    $.ajax({
    url: "http://" + ComputerIP + "/huayin/pageFileServerConfiguration.do",
    type: "post",
    dataType: "json",
    data: {
    "pageIndex": pageIndex,
    "fileDomain": fileDomain,
    "fileIp": fileIp
    },
    success: function(result) {
    console.log(result);
    pageCount = result.page.pageCount;
    var workstr = "<a title='编辑' href='javascript:;' onclick='member_edit_file(this,1)' class='ml-5' style='text-decoration:none'><i class='layui-icon'></i></a><a title='删除' href='javascript:;' onclick='member_del_file(this,1)' style='text-decoration:none'><i class='layui-icon'></i></a>"; for(var i = 0; i < result.pList.length; i++) {
    str += "<tr><td><input type='checkbox'></td><td style='display: none;'>" + result.pList[i].fileId + "</td><td>" + result.pList[i].fileDomain + "</td><td>" + result.pList[i].fileIp + "</td><td>" + result.pList[i].filePath + "</td><td>" + result.pList[i].filePathFtp + "</td><td class='td-manage'>" + workstr + "</td></tr>";
    } $("#filetable tr:gt(0)").remove() //移除第一行以后的数据
    $("#filetable").append(str) //追加 }
    }); //首页
    $("#sy").click(function() {
    //alert(1);
    $("#pageIndex").val(1);
    getJson();
    });
    //上一页
    $("#syy").click(function() {
    //alert(2);
    var index = $("#pageIndex").val();
    if(index != 1) {
    $("#pageIndex").val(parseInt(index) - 1);
    }
    getJson();
    });
    //下一页
    $("#xyy").click(function() {
    //alert(3);
    var index = $("#pageIndex").val();
    if(parseInt(index) < pageCount) {
    $("#pageIndex").val(parseInt(index) + 1);
    getJson();
    } else {
    layer.msg('已经是最后一页了');
    }
    });
    //尾页
    $("#wy").click(function() {
    //alert(4);
    var index = $("#pageIndex").val();
    $("#pageIndex").val(pageCount);
    getJson();
    });
    } $(function() {
    getJson(); //搜索数据共有多少条
    $.ajax({
    url: "http://" + ComputerIP + "/huayin/countFileServerConfiguration.do",
    type: "post",
    dataType: "json",
    data: {},
    success: function(result) {
    console.log(result);
    var countstr = "共有数据:" + result + " 条";
    $("#count").text(countstr);
    }
    }); $("#btnQuery").click(function() {
    getJson();
    }); });
    </script>
    <!--<script type="text/javascript">
    //反选
    function toggle() {
    //得到所有标签名为input的元素
    var y = document.getElementsByTagName("input");
    //alert(y.length);
    //循环出每个元素
    for(var i = 0; i < y.length; i++) {
    //如果元素的类型为checkbox,就反选
    if(y[i].type == "checkbox") {
    y[i].checked = !y[i].checked;
    }
    }
    } //全选
    function selAll() {
    //得到所有标签名为input的元素
    var y = document.getElementsByTagName("input");
    //alert(y.length);
    //循环出每个元素
    for(var i = 0; i < y.length; i++) {
    //如果元素的类型为checkbox,就全选
    if(y[i].type == "checkbox") {
    y[i].checked = true;
    }
    }
    } //全不选
    function noselAll() {
    //得到所有标签名为input的元素
    var y = document.getElementsByTagName("input");
    //alert(y.length);
    //循环出每个元素
    for(var i = 0; i < y.length; i++) {
    //如果元素的类型为checkbox,就全不选
    if(y[i].type == "checkbox") {
    y[i].checked = false;
    }
    }
    }
    </script>-->
    </head> <body>
    <div>
    <!--
    作者:2601263363@qq.com
    时间:2018-11-02
    描述:顶部搜索框
    -->
    <form class="layui-form xbs" action="">
    <div class="layui-form-pane" style="text-align: center;">
    <div class="layui-form-item" style="display: inline-block;">
    <label for="L_email" class="layui-form-label">域名:</label>
    <div class="layui-input-inline">
    <input type="text" name="fileDomain" id="fileDomain" placeholder="请输入域名" autocomplete="off" class="layui-input">
    </div> <label for="L_email" class="layui-form-label">IP地址:</label>
    <div class="layui-input-inline">
    <input type="text" name="fileIp" id="fileIp" placeholder="请输入IP地址" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
    <button class="layui-btn" id="btnQuery" lay-filter="sreach" type="button"><i class="layui-icon"></i></button>
    <button class="layui-btn" type="reset">重置</button>
    </div>
    <input type="hidden" name="pageIndex" id="pageIndex" value="1" />
    </div>
    </div>
    </form>
    <xblock>
    <a href="javascript:"><button class="layui-btn" onclick="selAll();">全选</button></a>
    <a href="javascript:"><button class="layui-btn" onclick="noselAll();">取消全选</button></a>
    <a href="javascript:"><button class="layui-btn layui-btn-danger" id="del">删除</button></a>
    <a href="add_file_base.html"><button class="layui-btn">添加</button></a>
    <span class="x-right" style="line-height:40px" id="count"></span>
    </xblock>
    <table class="layui-table" id="filetable">
    <!--
    作者:2601263363@qq.com
    时间:2018-11-02
    描述:表头
    -->
    <thead>
    <tr>
    <th>
    选择
    </th>
    <th>
    域名
    </th>
    <th>
    IP地址
    </th>
    <th>
    存放目录
    </th>
    <th>
    FTP目录
    </th>
    <th>
    操作
    </th>
    </tr>
    </thead>
    <!--
    作者:2601263363@qq.com
    时间:2018-11-02
    描述:第一行
    -->
    <tbody>
    <tr>
    <td>
    <input type="checkbox" value="1" name="">
    </td>
    <td>
    www.baidu.com
    </td>
    <td>
    192.168.1.2
    </td>
    <td>
    ../images/pohoto
    </td>
    <td>
    ../images/pohoto
    </td>
    <td class="td-manage">
    <a style="text-decoration:none" onclick="member_stop(this,'10001')" href="javascript:;" title="停用">
    <i class="layui-icon"></i>
    </a>
    <a title="编辑" href="update_file_base.html" class="ml-5" style="text-decoration:none">
    <i class="layui-icon"></i>
    </a>
    <!--<a style="text-decoration:none" onclick="member_password('修改密码','member-password.html','10001','600','400')" href="javascript:;" title="修改密码">
    <i class="layui-icon"></i>
    </a>-->
    <!--<a title="删除" href="javascript:;" onclick="member_del(this,'1')" style="text-decoration:none">
    <i class="layui-icon"></i>
    </a>-->
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" value="1" name="">
    </td>
    <td>
    www.baidu.com
    </td>
    <td>
    192.168.1.2
    </td>
    <td>
    ../images/pohoto
    </td>
    <td>
    ../images/pohoto
    </td>
    <td class="td-manage">
    <a style="text-decoration:none" onclick="member_stop(this,'10001')" href="javascript:;" title="停用">
    <i class="layui-icon"></i>
    </a>
    <a title="编辑" href="update_file_base.html" class="ml-5" style="text-decoration:none">
    <i class="layui-icon"></i>
    </a>
    <!--<a style="text-decoration:none" onclick="member_password('修改密码','member-password.html','10001','600','400')" href="javascript:;" title="修改密码">
    <i class="layui-icon"></i>
    </a>-->
    <!--<a title="删除" href="javascript:;" onclick="member_del(this,'1')" style="text-decoration:none">
    <i class="layui-icon"></i>
    </a>-->
    </td>
    </tr>
    </tbody>
    </table> <!--分页-->
    <div class="fenye" style="float: right;">
    <ul>
    <a href="javascript:;" id="sy">
    <li style="color: #F2F2F2;">首页</li>
    </a>
    <li id="syy" style="color: #F2F2F2;">上一页</li>
    <!--<li class="xifenye" id="xifenye">
    <a id="xiye">1</a>/
    <a id="mo">66</a>
    <div class="xab" id="xab" style="display:none">
    <ul id="uljia"> </ul>
    </div>
    </li>-->
    <li id="xyy" style="color: #F2F2F2;">下一页</a>
    </li>
    <li id="wy" style="color: #F2F2F2;">尾页</li>
    </ul>
    </div> </div> <script>
    var ComputerIP = "192.168.1.10";
    // 删除
    $("#del").click(function(){
    var arr=[];
    var arrne=[];
    var id=null;
    arr=$("input[type=checkbox]");
    for(var i=0;i<arr.length;i++){
    if(arr[i].checked==true){
    num=arr[i];
    id=num.parentNode.nextElementSibling.innerText;
    arrne.push(id);
    $.ajax({
    url: "http://" + ComputerIP + "/huayin/batchFileServerConfigurationDeletes.do",
    type: "post",
    dataType: "json",
    data: {
    "delitems": arrne.toString()
    },
    success: function(result) {
    console.log(result);
    history.go(0);
    }
    });
    num.parentNode.parentNode.parentNode.removeChild(num.parentNode.parentNode);
    }
    }
    }) /*编辑按钮*/
    function member_edit_file(obj, id) { // 获取点中行的id
    v = $(obj).parent().parent().children().eq(1).text();
    window.sessionStorage.setItem("member_edit_file_id", v);
    location.href = "update_file_base.html";
    } /*删除按钮弹窗提示*/
    function member_del_file(obj, id) {
    var v;
    $("#filetable tr").click(function() {
    // 获取点中行的id
    v = $(this).children().eq(1).text().trim();
    //alert(v);
    console.log(v);
    }) //询问框
    layer.confirm('您确定要删除该合作伙伴!', {
    btn: ['确定', '取消'] //按钮
    }, function() {
    //调用ajax进行删除
    //alert(v);
    $.ajax({
    url: "http://" + ComputerIP + "/huayin/deleteFileServerConfiguration.do",
    type: "post",
    dataType: "json",
    data: {
    "id": v
    },
    success: function(result) {
    if(result == 1) {
    layer.msg('操作成功');
    history.go(0);
    }
    }
    });
    }, function() { });
    }
    </script>
    </body>
    </html>

jquery给表格绑值的更多相关文章

  1. vue绑值(表格)

    vue绑值(表格) <!DOCTYPE html> <html lang="zh-CN"> <head> <title>JSON取数 ...

  2. 使用JQuery对页面进行绑值

    使用JQuery对页面进行绑值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  3. AJAX请求,返回json进行页面绑值

    AJAX请求,返回json进行页面绑值 后台 controller @RequestMapping(value = "backjson.do",method=RequestMeth ...

  4. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  5. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

  6. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

  7. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...

  8. jquery动态刷新select的值,后台传过来List<T>,前台解析后填充到select的option中

    jquery动态刷新select的值:将后台传来的List<T>赋值到select下的option. 第一个select选择后出发该方法refreshMerchant(params),传递 ...

  9. jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13 我要评论

    jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13我要评论 本文为大家介绍下jquery获得option的值和对option ...

随机推荐

  1. codeforces gym100418J

    题目简述 给定N 求1到N中有多少个幸运数字 幸运数字的定义为 这个数能被它二进制表示下1的个数整除 其中(1 ≤ N ≤ 1019) -------------------------------- ...

  2. Configuring IPMI under Linux using ipmitool

    http://www.thomas-krenn.com/en/wiki/Configuring_IPMI_under_Linux_using_ipmitool Configuring IPMI und ...

  3. ssd存储的SLC、MLC、TLC闪存芯片颗粒有什么区别?

    SLC = Single-Level Cell ,即1bit/cell,速度快寿命长,价格贵(约MLC 3倍以上的价格),约10万次擦写寿命: MLC = Multi-Level Cell,即2bit ...

  4. Android深度探索-卷1第一章心得体会

     本章介绍了安卓系统移植与驱动开发的概述,安卓的系统架构有四层:1 Linux内核,2 c/c++代码库, 3 Android SDK API, 4 应用程序 在读的过程中看到了专业名词,查了查,长点 ...

  5. scrapy爬虫值Items

    Items有哪些知识? 1.声明 import scrapy class Product(scrapy.Item): name = scrapy.Field() price = scrapy.Fiel ...

  6. maven scope 作用域

    1.test范围指的是测试范围有效,在编译和打包时都不会使用这个依赖 2.compile范围指的是编译范围有效,在编译和打包时都会将依赖存储进去 3.provided依赖:在编译和测试的过程有效,最后 ...

  7. oracle Notes

    1. selecting distinct values from an assocaitive array 2. Setting the NLS_LANG Environment Variable ...

  8. c# 遍历 Mysql 所有表所有列,查找目标数据

    在 Mysql 的 information_schema 库中 COLUMNS 表中存放了所有表的所有列. using MySql.Data.MySqlClient; using System; us ...

  9. 理解 TCP/IP 三次握手与四次挥手

    TCP建立连接为什么是三次握手,而不是两次或四次? TCP,名为传输控制协议,是一种可靠的传输层协议,IP协议号为6. 顺便说一句,原则上任何数据传输都无法确保绝对可靠,三次握手只是确保可靠的基本需要 ...

  10. Nginx+Keepalived主从配置(双机主从热备)+Tomcat集群

    拓扑环境 以下表格是这次測试须要的拓扑环境,几台server.每台server上安装什么,都有介绍. server名称 系统版本号 预装软件 IP地址/VIP Nginx主server CentOS ...