bootstrap 列表全选(全自动)

纯js实现,确实厉害,完全不影响原有表格效果和结构。

效果图

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-11-11-%e4%b8%8b%e5%8d%882-43-31

$(function(){
	function initTableCheckbox() {
		var $thr = $('table thead tr');
		var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
		/*将全选/反选复选框添加到表头最前,即增加一列*/
		$thr.prepend($checkAllTh);
		/*“全选/反选”复选框*/
		var $checkAll = $thr.find('input');
		$checkAll.click(function(event){
			/*将所有行的选中状态设成全选框的选中状态*/
			$tbr.find('input').prop('checked',$(this).prop('checked'));
			/*并调整所有选中行的CSS样式*/
			if ($(this).prop('checked')) {
				$tbr.find('input').parent().parent().addClass('warning');
			} else{
				$tbr.find('input').parent().parent().removeClass('warning');
			}
			/*阻止向上冒泡,以防再次触发点击操作*/
			event.stopPropagation();
		});
		/*点击全选框所在单元格时也触发全选框的点击操作*/
		$checkAllTh.click(function(){
			$(this).find('input').click();
		});
		var $tbr = $('table tbody tr');
		var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');
		/*每一行都在最前面插入一个选中复选框的单元格*/
		$tbr.prepend($checkItemTd);
		/*点击每一行的选中复选框时*/
		$tbr.find('input').click(function(event){
			/*调整选中行的CSS样式*/
			$(this).parent().parent().toggleClass('warning');
			/*如果已经被选中行的行数等于表格的数据行数,将全选框设为选中状态,否则设为未选中状态*/
			$checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
			/*阻止向上冒泡,以防再次触发点击操作*/
			event.stopPropagation();
		});
		/*点击每一行时也触发该行的选中操作*/
		$tbr.click(function(){
			$(this).find('input').click();
		});
	}
	initTableCheckbox();
});

 

参考:

http://www.voidcn.com/blog/shangmingchao/article/p-4860592.html

Javascript 判断远程文件是否存在

$.ajax({
  url: 'example.com/abc.html', //or your url
  success: function(data){
    alert('exists');
  },
  error: function(data){
    alert('does not exist');
  },
})
function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

如果文件不存在,浏览器的控制台会有报错信息。

参考

http://stackoverflow.com/questions/3646914/how-do-i-check-if-file-exists-in-jquery-or-javascript

循环中ajax请求全局变量问题

循环中异步ajax请求用到全局变量如果不做特殊处理不会得到预想的结果,这里的全局变量指的是ajax回掉外边在循环内定义的变量。

因为是异步请求,所以基本是在循环完毕之后才会执行,这时候会调中用到的全局变量是最后一次循环后的那个变量。

解决办法就是必须把当前循环中的变量传递到一个封闭空间中,比如以参数形式传递到函数中。

参考

http://stackoverflow.com/questions/2687679/jquery-ajax-inside-a-loop-problem

jQuery 获取当前节点的html

在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然后我们有时候确需要,找遍jQuery api文档也没有任何方法可以拿到。

看到有的人通过parent().html(),如果当前元素没有兄弟元素还行,如果有那就行不通了。后台实验发现有一个jQuery的一个方法可以解决,而且非常简便,如下:

jQuery.prop("outerHTML");

<div class="test"><p>hello,你好!</p></div>
<script>
$(".test").prop("outerHTML");
</script>

输出结果为:<div class="test"><P>hello,你好!</p></div>

因为原生JS DOM里有一个内置属性 outerHTML (看清大小写哦,JS是区分大小写的)用来获取当前节点的html代码(包含当前节点),所以用jQuery的prop()能拿到,经过实验attr()方法是拿不到的,不信的话,大家也可以尝试尝试,谢谢。

当然也有人用jQuery的 clone() 函数配合append() 来创建一个只有一个子元素的节点,然后来拿节点的html,这样也是可行的,但是代码繁琐。