jquery给表格绑值
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给表格绑值的更多相关文章
- vue绑值（表格）
vue绑值(表格) <!DOCTYPE html> <html lang="zh-CN"> <head> <title>JSON取数 ...
- 使用JQuery对页面进行绑值
使用JQuery对页面进行绑值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- AJAX请求,返回json进行页面绑值
AJAX请求,返回json进行页面绑值 后台 controller @RequestMapping(value = "backjson.do",method=RequestMeth ...
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- Jquery操作表格多出一个内容行
目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...
- JQuery实现表格的增加行和删除行
利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...
- 使用jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...
- jquery动态刷新select的值，后台传过来List<T>，前台解析后填充到select的option中
jquery动态刷新select的值:将后台传来的List<T>赋值到select下的option. 第一个select选择后出发该方法refreshMerchant(params),传递 ...
- jquery获得option的值和对option进行操作 作者： 字体：[增加 减小] 类型：转载 时间：2013-12-13 我要评论
jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13我要评论 本文为大家介绍下jquery获得option的值和对option ...
随机推荐
- codeforces gym100418J
题目简述 给定N 求1到N中有多少个幸运数字 幸运数字的定义为 这个数能被它二进制表示下1的个数整除 其中(1 ≤ N ≤ 1019) -------------------------------- ...
- Configuring IPMI under Linux using ipmitool
http://www.thomas-krenn.com/en/wiki/Configuring_IPMI_under_Linux_using_ipmitool Configuring IPMI und ...
- ssd存储的SLC、MLC、TLC闪存芯片颗粒有什么区别？
SLC = Single-Level Cell ,即1bit/cell,速度快寿命长,价格贵(约MLC 3倍以上的价格),约10万次擦写寿命: MLC = Multi-Level Cell,即2bit ...
- Android深度探索-卷1第一章心得体会
本章介绍了安卓系统移植与驱动开发的概述,安卓的系统架构有四层:1 Linux内核,2 c/c++代码库, 3 Android SDK API, 4 应用程序 在读的过程中看到了专业名词,查了查,长点 ...
- scrapy爬虫值Items
Items有哪些知识? 1.声明 import scrapy class Product(scrapy.Item): name = scrapy.Field() price = scrapy.Fiel ...
- maven scope 作用域
1.test范围指的是测试范围有效,在编译和打包时都不会使用这个依赖 2.compile范围指的是编译范围有效,在编译和打包时都会将依赖存储进去 3.provided依赖:在编译和测试的过程有效,最后 ...
- oracle Notes
1. selecting distinct values from an assocaitive array 2. Setting the NLS_LANG Environment Variable ...
- c# 遍历 Mysql 所有表所有列，查找目标数据
在 Mysql 的 information_schema 库中 COLUMNS 表中存放了所有表的所有列. using MySql.Data.MySqlClient; using System; us ...
- 理解 TCP/IP 三次握手与四次挥手
TCP建立连接为什么是三次握手,而不是两次或四次? TCP,名为传输控制协议,是一种可靠的传输层协议,IP协议号为6. 顺便说一句,原则上任何数据传输都无法确保绝对可靠,三次握手只是确保可靠的基本需要 ...
- Nginx+Keepalived主从配置(双机主从热备)+Tomcat集群
拓扑环境 以下表格是这次測试须要的拓扑环境,几台server.每台server上安装什么,都有介绍. server名称 系统版本号 预装软件 IP地址/VIP Nginx主server CentOS ...