闲来无事,照着runjs里面别人写的代码写了一个表格操作,才发现,自己有多蠢;
最基本的东西几天不写就脑子蒙圈了,一个简单的代码折腾了那么久,深感惭愧;
效果如下:
因为想要练手js,所以没有在样式上下太大的功夫:
html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
table{
width: 500px;
text-align: center;
border:1px solid #000;
margin-top: 20px;
margin-left: 200px;
}
tr{
height: 30px;
border: 1px solid red;
}
button{
width: 50px;
height: 30px;
margin-top: 5px;
}
.zeng{
width: 100px;
height: 30px;
margin-left: 200px;
margin-top: 10px;
}
td{
text-align: center;
}
.sav{
float: left;
}
.canc{
float: left;
}
</style>
<body>
<table id="tab">
<caption>边框表格布局</caption>
<thead>
<th>名称</th>
<th>城市</th>
<th>密码</th>
<th>操作</th>
</thead>
<tr>
<td>a</td>
<td>北京</td>
<td>123</td>
<td><button class="chang">修改</button>
</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>b</td>
<td>天津</td>
<td>123</td>
<td><button class="chang" id="chang">修改</button>
</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>c</td>
<td>上海</td>
<td>123</td>
<td><button class="chang">修改</button>
</td>
<td><button class="del">删除</button></td>
</tr>
</table>
<button class="zeng" id="zeng">增加</button>
</body>
</html>
引入了一个外部的/jquery
下面是js的代码:
<script>
//增加
var zeng=document.getElementById('zeng');
$('#zeng').click(function(){
if($('table tr').hasClass('add')){
alert('请先完成操作')
}else{
$('table tr:last').after('<tr>'+'<td><input type="text" name="names" value=""/></td>'
+'<td><input type="text" name="sexs" value=""/></td>'
+'<td><input type="text" name="ages" value=""/></td>'
+'<td><button class="sav btn save">保存</button></td>'
+'<td><button class="canc btn off">取消</button></td>'
+'</tr>'
)
}
});
//删除
$(document).on("click",".del",function(){
var name =$(this).parent().parent().parent().html();
//alert(name);
this. closest('tr').remove()
});
//修改
//修改
$(document).on("click",".chang",function(){
if($("table tr").hasClass("add")){
alert("先完成操作!!!");
}else{
var name =$(this).parent().parent().find('td').eq(0).text();
// alert(name)
var sex =$(this).parent().parent().find('td').eq(1).text();
//alert(sex)
var age =$(this).parent().parent().find('td').eq(2).text();
//alert(age)
var n="";
n='<td><input type="text" name="names" value="'+name+'" /></td>'
+'<td><input type="text" name="sexs" value="'+sex+'" /></td>'
+'<td><input type="text" name="ages" value="'+age+'" /></td>'
+'<td><button class="sav btn save">保存</button></td>'
+'<td><button class="canc btn off">取消</button></td>'
$(this).parent().parent().addClass("add");
$(this).parent().parent().html(n);
}
})
$(document).on("click",".off",function(){
window.location.reload();
})
//保存
$(document).on('click','.sav',function(){
var name =$(this).parent().parent().find('input[name="names"]').val();
var sex =$('input[name="sexs"]').val();
var age =$('input[name="ages"]').val();
var n="";
n='<td>'+name+'</td>'
+'<td>'+sex+'</td>'
+'<td>'+age+'</td>'
+'<td><button class="chang">修改</button>'
+'<td><button class="del">删除</button></td>'
$(this).parent().parent().removeClass("add");
$(this).parent().parent().html(n);
})
</script>
短短100行不到的代码,看似如此简单,没想到却是出了很多的问题的,
下面是问题总结:
1,
这里有一个on方法的绑定,最开始写的时候没有太过留意,引入的是jquery1.3.2.min.js,结果莫名的报错说
....on.....不是一个函数,后来发现原因,on方法在jquery1.7以上版本才支持,所以,吸取经验教训,以后引入
的jquery一定是比较高的版本;
2,
jquery的元素追加
上面是来自w3cschool的方法,这里存在一个append与after的区别,以及prepend与before的区别;
http://blog.csdn.net/ljyabc1028/article/details/7341665
这里有一篇别人的博客讲的很清楚,就是prepend是添加在你所选元素的里面的内容的前面,而before
则是添加到你所选的元素的前面,在这个标签的前面,同理,prepend是添加到你所选的元素的里面的内容的
后面,而after则是添加到你所选的元素的后面,是在该标签的外面,
另外存在一个appendTo,是把被选中的元素放到后面,把需要添加的内容放到前面,同样的,这个也是添加到元素
的内部内容的后面;
3,
jquery中判断是否含有class的属性;
4,
事件的绑定,之前看博客时候记得别人写,点击事件什么的,一定要写在js里面,或者用委托来写,不能再html里面添加
这一点非常受用:
(1)
(2)
这里有别人写的关于事件委托的好处
http://www.cnblogs.com/leejersey/p/3801452.html
5,
关于整行的删除;
remove方法行不通,这里存在着自己看不懂的地方,后来改用方法:
点击当前行内的一个button,删除他所在的行,道理不是很懂,先把方法记录下来;
就是沿着dom树指导找到与选择器内匹配的为止;
http://www.w3school.com.cn/jquery/traversing_closest.asp
6,
添加class;
在html()里面可以直接写入内容,相当于js里面的innerhtml;
7,
另外有一个解释不通的地方;就是我的文件中明明没有引入bootstrap,但是bootstrap的组件却生效了,
即取消按钮上面的btn off,暂时还没有查到原因,但是知道以后写取消按钮可以这么用了
总觉到此为止,但是思想上却还是要反思,一天不写就手生这话是真的,只有敲了才能发现问题,每天200行走起