关于js计算和判断 操作html
<html>
<head>
<title>This is a test!</title>
<style type="text/css">
<!--
body,div,p,ul,li,font,span,td,th{
font-size:10pt;
line-height:155%;
}
table{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
}
td{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}
.EditCell_TextBox {
width: 90%;
border:1px solid #0099CC;
}
.EditCell_DropDownList {
width: 90%;
}
.colorfocus{
background-color:red
}
.txt{
background-color:#ccc}
-->
</style>
<script src="../../JQuery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabProduct").each(function () {
var trlen = $("#tabProduct tr").length;
for (n = 0; n < trlen; n++) {
$("#tabProduct tr").each(function () {
var a = $(this).children('td').eq(0).html() - 0;
var str = $(this).children('td').eq(1).html();
var b = $(this).children('td').eq(2).html() - 0;
var c = 0;
var len = $(this).children('td').length;
for (i = 0; i < len; i++) {
c = $(this).children('td').eq(i).html() - 0;
if (str == "<>") {
if (a > c || c > b) {
$(this).children('td').eq(i).css("color", "red")
}
}
}
for (i = 0; i < len; i++) {
$(this).children('td').eq(i).click(function () {
var objTD = $(this);
var oldText = $.trim(objTD.text());
var input = $("<input type='text' value=''>" + oldText + "</input>");
objTD.html(input);
input.click(function () {
return false;
});
//设置文本框样式,让界面显示的人性化点
input.css("font-size", "16px");
input.css("text-align", "center");
input.css("background-color", "#ffffff");
input.width("30px");
input.height("14px");
//自动选中文本框中的文字
input.select();
//文本框失去焦点时重新变为文本
input.blur(function ax() {
//获得新输入的类别名
var newText = $(this).val();
//用新的类别名文字替换之前变过来的输入框状态
objTD.html(newText);
//获取该类别名所对应的ID(bigclassid)
var bigclassid = objTD.prev().text();
//将新的类别名进行转码,不然界面以及数据库显示的都是"???"这样的乱码
newText = escape(newText);
//alert("n: " + n + " i:" + i + " bigclassid:" + bigclassid);
//$("#tabProduct").children("tr").eq(n).children("td").eq(i).css("color", "cyan");
});
/*当前,我需要在这里进行判断,判断在页面输入的值是否在范围a和b之间;其中要获取输入的值,即等同于newText
**/
//$(this).css("color", "cyan");//这种方式只能改变,改变数字的颜色,不能判断
//我想要达到的效果是这样的:
/*
var k=newText-0;
if (str == "<>") {
if (a > k || k > b) {
$(this).children('td').eq(i).css("color", "red")
}
}
*/
});
}
});
}
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<h3>可编辑的表格</h3>
<table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">
<tr>
<td width="186" Name="Num" EditType="TextBox">spec1</td>
<td width="152" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'<>'},{text:'B',value:'<>'},{text:'C',value:'<>'},{text:'D',value:'<>'}">符号</td>
<td width="103" Name="Num" EditType="TextBox">spec2</td>
<td width="103" Name="Num" EditType="TextBox">1</td>
<td width="103" Name="Num" EditType="TextBox">2</td>
<td width="103" Name="Num" EditType="TextBox">3</td>
<td width="103" Name="Num" EditType="TextBox">4</td>
<td width="103" Name="Num" EditType="TextBox">5</td>
</tr>
<tr id="test1">
<td>1</td>
<td><></td>
<td>4</td>
<td>1</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="test2">
<td>2</td>
<td><></td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
<br />
</div>
</form>
</body>
</html>