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 ...
随机推荐
- TP5数据库事务操作
使用事务处理的话,需要数据库引擎支持事务处理.比如 MySQL 的 MyISAM 不支持事务处理,需要使用 InnoDB 引擎. 使用 transaction 方法操作数据库事务,当发生异常会自动回滚 ...
- upc组队赛14 Communication【并查集+floyd /Tarjan】
Communication 题目描述 The Ministry of Communication has an extremely wonderful message system, designed ...
- java多线程学习笔记（六）
本节开始synchronized关键字的最后一部分内容: 静态同步方法synchronized方法与synchronized(class)代码块 关键字synchronized还可以用在static静 ...
- vue项目中路由验证和相应拦截的使用
详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/ ...
- MVC通过重写OnActionExecuting获取控制器，方法和域
一,如下代码 protected override void OnActionExecuting(ActionExecutingContext filterContext) {string _cont ...
- 十、hibernate的延迟加载和抓取策略
延迟加载:控制sql语句发送时机 抓取策略:控制sql语句格式,子查询.连接查询.普通sql 延迟加载 延迟加载(lazy),也叫做懒加载:执行到该行代码时,不发送sql进行查询,只有在真正使用到这个 ...
- RabbitMQ 在 Win10 环境下的安装与配置
1 RabbitMQ 环境配置 1.1 ErLang 下载安装 RabbitMQ 需要 ErLang 环境支持:首先下载 ErLang 并安装. 建议使用新版本,版本过低存在与 Rab ...
- constructor prototype __proto__
什么是对象 若干属性的集合 什么是原型? 原型是一个对象,其他对象可以通过它实现继承. 哪些对象有原型? 所有的对象在默认情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型(只有一 ...
- Primeng UI框架ionic3 中下拉选择插件p-dropdown 插件的使用方法
1.html引入: <p-dropdown float-right [options]="sortOption" [(ngModel)]="sortNow" ...
- Mysql 事务相关
MySQL介绍 什么是MySQL? MySQL 是一种关系型数据库,在Java企业级开发中非常常用,因为 MySQL 是开源免费的,并且方便扩展.阿里巴巴数据库系统也大量用到了 MySQL,因此它 ...