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 ...
随机推荐
- 项目搭建（三）：自定义DLL
说明:程序中有些自定义的控件类型在TestStack.White框架中没有涉及,需要引入自定义的DLL,通过鼠标点击事件处理 使用:将自定义的ClassLibrary2.dll拷贝到项目/bin/de ...
- Kali开启SSH服务
1. 一.配置SSH参数 修改sshd_config文件,命令为: vi /etc/ssh/sshd_config 将#PasswordAuthentication no的注释去掉,并且将NO修 ...
- python2.7.13标准库文件目录操作与文件操作
标准库的中文参考文档: http://python.usyiyi.cn/translate/python_278/library/index.html 官方标准库文档:https://docs.pyt ...
- The life-saving straw
English learning In contemporary world, English learning has gained great popularity and it is of ...
- dubbo远程服务调用和maven依赖的区别
dubbo:跨系统通信.比如:两个系统,一个系统A作客户端,一个系统B作服务器, 服务器B把自己的接口定义提供给客户端A,客户端A将接口定义在spring中的bean.客户端A可直接使用这个bean, ...
- JavaScript Stack
function Stack() { var items = []; this.push = function(item) { items.push(item) } this.pop = functi ...
- linux查看日志中特定字符串以及前后信息内容命令
在项目实施过程中,我们经常会查看日志,更是经常会根据某些特地字符串去查找日志内容. 下面就是日志查找命令: 1.查询字符串命令: cat fileName|grep '要查找的字符串' 实例:cat ...
- python 字典（dictionary）一些方法
1.python 字典(Dictionary) keys() 函数以列表返回一个字典所有的键. keys()语法: dict.keys() 2.setdefault()方法 python字典setde ...
- ARM与X86 CPU架构区别
CISC(复杂指令集计算机)和RISC(精简指令集计算机)是当前CPU的两种架构.它们的区别在于不同的CPU设计理念和方法.早期的CPU全部是CISC架构,它的设计目的是 CISC要用最少的机器语言指 ...
- 42th 逻辑的连续性 取决于 细节的理解-------------我是个厨子:类的调用vs 对象调用方法
类的调用vs 对象调用方法 class Cook5: '''这是一个厨师的类''' # 类是一系列对象相同的特征与技能的结合体 # 用变量表示特征(属性) ...