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 ...
随机推荐
- QTP使用Smtp协议发送邮件
NameSpace = "http://schemas.microsoft.com/cdo/configuration/" Set Email = CreateObject(&qu ...
- C++中逗号操作符重载的分析
1,关注逗号操作符重载后带来的变化: 2,逗号操作符: 1,逗号操作符(,)可以构成都好表达式:exp1, exp2, exp3, ..., expN 1,逗号表达式用于将多个表达式连接为一个表达式: ...
- 原生AJAX的封装
/**调用AJAX ajaxPlug.openajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 ...
- 【转】vim 配置文件 ，高亮+自动缩进+行号+折叠+优化
将一下代码copy到 用户目录下 新建文件为 .vimrc保存即可生效: 如果想所有用户生效 请修改 /etc/vimrc (建议先cp一份) "===================== ...
- 删除文件时提示“找不到该项目”，怎么解决? 转摘自：http://jingyan.baidu.com/article/e4d08ffdf5ab470fd2f60df4.html
故障现象:在使用Windows系统删除文件或者文件夹的时候,有时会出现“找不到该项目”的错误提示,可能再次“重试”也无济于事. 那么,接下来T库小编就为库友们简单概括一下出现该问题的原因. 故障原因: ...
- 消息 245，级别 16，状态 1，第 1 行 在将 varchar 值 '2,8' 转换成数据类型 int 时失败。
错误问题: 消息 245,级别 16,状态 1,第 1 行在将 varchar 值 '2,8' 转换成数据类型 int 时失败. ps: 这是在后台分配菜单权限这个功能时出现的问题 一,解决方法: 将 ...
- bootstrap-thymeleaf-分页
1.HTML代码 <div th:fragment="paginater"> <ul th:id="paginaterUlID" th:if= ...
- 转载：java面试题(二)
这部分主要是开源Java EE框架方面的内容,包括Hibernate.MyBatis.Spring.Spring MVC等,由于Struts 2已经是明日黄花,在这里就不讨论Struts 2的面试题, ...
- C#驱动mysql明明数值不为空却一直说DBNull.Value的诡异情况
最近遇见了一个很诡异的情况,就是当我们关联表查询时,副表如果有bit类型的字段的话,C#驱动读取该列时就会抛出“DBNull.Value不能转换为其他类型”的异常,但是我们如果拿出sql语句单独查询的 ...
- dosbox下载并配置BC3.1及环境变量的方法
https://www.tuicool.com/articles/v2A3mm--Win8下用DOSBox编写汇编语言 http://www.dosbox.com/ http://www.masm32 ...