js校验表格中两个单元格之间的关系

ztreal

浏览: 70167 次
性别:
来自: 北京

最近访客更多访客>>

304471720

mp8719898

zhaoqian123

heycheng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

目的是为了校验table中两个单元格之间的平衡关系，例如大于小于等。

形式为jquery插件

/**
 * @author zhangtan
 * @email ztreal@gmail.com
 * @since  2010-10-21
 * 校验页面平衡关系
 * @version 1.0.0(2010-10-21)
 * @jquery  1.3.2
 */
(function($) {
    //基本参数  校验提示文字
    /** $.fn.print.default = {
     greater: "greater than"
     };

     // 需要校验的内容参数传入
     *   var valicontent=new Array({c1tr:0,c1td:1,c2tr:0,c2td:3,symbol:'<'},{c1tr:1,c1td:1,c2tr:1,c2td:3,symbol:'<'},{c1tr:2,c1td:'1+3',c2tr:2,c2td:5,symbol:'<'});
     $("#test").check(valicontent);  **/
    $.fn.check = function(options) {
        ///<summary>
        /// validate div table cell 之间的平衡关系
        ///</summary>
        var va1namelist = '';
        var va1 = 0;
        var va2 = "";
        var va2name = "";
        var symbol = "";
        var error = [];
        $("#jsshowerror").empty();
        for (var i = 0; i < options.length; i++) {
            //var opts = $.extend({}, $.fn.check.defaults, options);
            var temptdlist = options[i].c1td.toString().split('+');
            if (options[i].c1td.toString().indexOf('+') > -1) {

                for (var ii = 0; ii < temptdlist.length; ii++) {
                    va1 = Number(va1) + Number($(this).find("tr").eq(options[i].c1tr).children("td").eq(temptdlist[ii]).find("input[type='text'],select").val());
                    va1namelist = va1namelist + '加' + $(this).find("tr").eq(options[i].c1tr).children("td").eq(temptdlist[ii] - 1).html();
                }
                va1namelist = va1namelist.substring(1, va1namelist.length);
                va2 = $(this).find("tr").eq(options[i].c2tr).children("td").eq(options[i].c2td).find("input[type='text'],select").val();
                va2name = $(this).find("tr").eq(options[i].c2tr).children("td").eq(options[i].c2td - 1).html();
                symbol = options[i].symbol;
                if (eval(va1 + symbol + va2)) {
                    //alert("检验成功！");
                }
                else {
                      error[error.length]=  va1namelist + $.fn.check.defaults[symbol] + va2name;
                    //alert(va1namelist + $.fn.check.defaults[symbol] + va2name);
                }
            }
            else {
                va1 = $(this).find("tr").eq(options[i].c1tr).children("td").eq(options[i].c1td).find("input[type='text'],select").val();
                var va1name = $(this).find("tr").eq(options[i].c1tr).children("td").eq(options[i].c1td - 1).html();
                va2 = $(this).find("tr").eq(options[i].c2tr).children("td").eq(options[i].c2td).find("input[type='text'],select").val();
                va2name = $(this).find("tr").eq(options[i].c2tr).children("td").eq(options[i].c2td - 1).html();
                symbol = options[i].symbol;
                if (eval(va1 + symbol + va2)) {
                    //alert("检验成功！");
                }
                else {
                    error[error.length]=  va1name + $.fn.check.defaults[symbol] + va2name;
                   // alert(va1name + $.fn.check.defaults[symbol] + va2name);
                }
            }
        }
        if($("#jsshowerror").length>=1){
            var errorhtml="";
            for(var i =0;i<error.length;i++){
                errorhtml = errorhtml+ "<div>"+error[i]+"</div>";
            }
              $("#jsshowerror").append(errorhtml);
        }
    };

    //校验弹出的提示框
    $.fn.check.defaults = {
        '>': '应大于',
        '<': '应小于'
    };
})(jQuery);

使用范例为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
	<title>校验测试</title> 
 <script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script> 
 <script type="text/javascript" src="../common/js/jquery.valipingmeng.js"></script> 
	<script type="text/javascript"> 
	
	</script> 
	<style type="text/css">
	#jsshowerror{
        color:red;
    }
	</style>
	
<script type="text/javascript"> 
	$(function() { 
	$("#check").click(function(){
		var valicontent=new Array({c1tr:0,c1td:1,c2tr:0,c2td:3,symbol:'<'},{c1tr:1,c1td:1,c2tr:1,c2td:3,symbol:'<'},{c1tr:2,c1td:'1+3',c2tr:2,c2td:5,symbol:'<'});
		$("#test").check(valicontent); 
	})
	});
 

</script> 
</head> 
<body >
<div id="jsshowerror"></div>
<input type="button" id="check" value="校验"></input>
  <table id="test">
  	<tr>
  		<td>年龄1</td>
		<td><input type="text"  value="11"/></td>
		<td>年龄2</td>
		<td><input type="text"  value="22"/></td>
  	</tr>
	  	<tr>
  		<td>年龄11</td>
		<td><input type="text"  value="11"/></td>
		<td>年龄22</td>
		<td><select>
			<option>10</option>
			<option>20</option>
		</select></td>
  	</tr>
	<tr>
  		<td>数字1</td>
		<td><input type="text"  value="11"/></td>
		<td>数字2</td>
		<td><select>
			<option>10</option>
			<option>20</option>
		</select></td><td>合计</td>
	   <td><input type="text"  value="33"/></td>
  	</tr>
  </table>
  </body>
</html>

分享到：