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 ...
随机推荐
- outlook使用inline style回复邮件
Reply with inline comments within the original message text When you reply to email messages in Outl ...
- python/pandas 正则表达式 re模块
目录 正则解说 中文字符集 re模块常用方法 1.正则解说 数量词的贪婪模式与非贪婪模式 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪) ...
- sdb报告-10 错误问题定位
# sdb报告-10 错误问题定位在sdb 的集群环境中,如果面对的是一个高并发的操作场景,有时候会莫名其妙地报告 -10 错误. 在 sdb 的错误列表中,-10 错误代表:系统错误. 这是一个笼统 ...
- jenkins clone代码时间太长怎么办？
在Jenkins的默认配置中,clone代码时会拉取所有历史版本的代码,而且默认的超时时限只有10分钟.这就造成在某些项目中,由于代码量本身就比较大,历史版本也比较多,再加上网络环境不是特别好,Jen ...
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
- webpack请求文件路径代理
在开发模式下,访问页面请求会跑到根路径,因为写的都 ./images 而index又在根目录, 所以访问地址会是 http://localhost:8080/images/abc.jpg 而实际 ...
- HDU 4886 TIANKENG’s restaurant(Ⅱ) ( 暴力+hash )
TIANKENG’s restaurant(Ⅱ) Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 130107/65536 K (Ja ...
- java虚拟机规范(se8)——class文件格式(四)
4.7 属性 属性用于class文件格式中的ClassFile,field_info,method_info和Code_attribute结构. 所有的属性都是下面的格式: attribute_inf ...
- 从一个Activity打开另外一个Activity
public class MainActivity extends Activity { /** Called when the activity is first created. */ @Over ...
- Vue小白篇 - ES6的语法
为什么要学 ES6 的语法呢? 因为 Vue 语法有很多都是 ES6(ECMAScript 6),这里推荐 [阮一峰 ECMAScript 6 入门]: http://es6.ruanyifeng.c ...