您的位置：首页 > Web前端 > JQuery

HTML之JQuery基础实现可编辑表格

2016-10-13 23:08 417 查看

先来安利一下知识点

JQuery 是一个javascript库，它通过封装原声的javascript函数得到一套定义好的方法。
JQuery 版本：JQuery1.xxx
JQuery 2.xxx不支持IE6 7 8
优势：1.可以像CSS一样访问和操作DOM
2.修改CSS控制页面外观
3.简化JS代码操作
4.事件处理更加容易
5.动画效果使用方便
6.AJAX技术更加完美
7.大量的基于jquery的插件
格式：$(selector).action()
$是JQuery 本身对象的缩写
Action执行对元素的操作

详情请见W3CSCHOOL
下面我们来说一下

实现效果

点击学号旁的checkbox可以实现全选和非全选

点击编辑按钮可以实现编辑学号和姓名属性

点击确定按钮保存编辑后的学号和姓名

点击新增按钮，新增一行

点击删除最后一行，删除最后一行

点击删除一行，会删除checkbox选中的一列

下面是详细代码：

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可编辑的表格</title>
<script src="../js/jquery-1.4.2.min.js"></script>

<style>
table{
border: 1px solid black;
border-collapse: collapse;
width: 500px;
}
table th {
border: 1px solid black;
width: 25%;
}
table td {
align-items: center;
border: 1px solid black;
width: 25%;
}
table th {
background-color: #A3BAE9;
}
</style>
<script>
//文档准备就绪
$(function () {
//设置 所有 td 居中
$('table td').attr("align","center");
//标签+属性选择所有<编辑>按钮
$('input[value="编辑"]').click(function () {
//获取每一个<编辑>按钮的 下标（从0开始 所以需要+2 = 按钮在表格的所在行数）
var numId = $('input[value="编辑"]').index($(this))+2;
//选择表格中的所有tr 通过eq方法取得当前tr
var ttr = $('table tr').eq(numId);
/*当前行使用find方法找到每一个td列
each方法为每一个td设置function
*/
ttr.find("td").each(function () {
/*过滤 td中的元素
checkbox 、 button、text 不需要执行append
注意 return 为 跳出当前 each
return false 为 跳出整个 each
*/
if($(this).children("input[type='checkbox']").length>0){
return ;
}
if($(this).children("input[type='button']").length>0){
return ;
}
if($(this).children("input[type='text']").length>0){
return ;
}
var tdText = $(this).html();
$(this).html("");
var inputObj = $("<input type='text'>");
inputObj.appendTo($(this));
inputObj.css("width","95%");
inputObj.val(tdText);
});
});
//为每一个确定按钮设置点击事件
$('input[value="确定"]').click(function () {
/*通过parents方法获取<确定>按钮的父容器tr
再为 tr中的每一个text设置function
*/
var ttr=$(this).parents("tr");
ttr.find('input[type="text"]').each(function () {
var inputVal = $(this).val();
$(this).parents('td').html(inputVal);
})
});
//全选/反选
$('#cha').click(function () {
//判断checkbox是否选中
if($(this).is(':checked')){
$('input[type="checkbox"]').attr("checked","true");
}else{
$('input[type="checkbox"]').removeAttr("checked");
}
});
//增加一行
$('#add').click(function () {
$('table tr').eq(2).clone(true).appendTo("table");
});
//删除最后一行
$('#delete').click(function () {
$('table tr:last').remove();
});
$('#deleteone').click(function () {
$('input[type="checkbox"]');

});
})

</script>

</head>
<body>
<input type="button" value="新增" id="add">
<input type="button" value="删除最后一行" id="delete">
<input type="button" value="删除选中的一行" id="deleteone">
<table border="1">
<thead>
<tr>
<th colspan="4">编辑表格</th>
</tr>
</thead>

<tr>
<th><input type="checkbox" id="cha"></th>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>000001</td>
<td>张三</td>
<td >
<input type="button" value="编辑" >
<input type="button" value="确定" >
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>000002</td>
<td>李四</td>
<td>
<input type="button" value="编辑" >
<input type="button" value="确定" >
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>000003</td>
<td>王五</td>
<td>
<input type="button" value="编辑" >
<input type="button" value="确定" >
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>000004</td>
<td>赵六</td>
<td>
<input type="button" value="编辑" >
<input type="button" value="确定" >
</td>
</tr>

</table>

</body>
</html></span>

下面是效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航