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

jquery根据下拉框的值控制表格行的变化

2009-07-21 08:57 399 查看 
<html>
<head>

<title>colormap</title>

<mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function(){
$("#colorsel").change(function(){
var str=$("#colorsel option:selected").val();

//	alert(str);
for(var i=2;i<=10;i++){
if(i<=(str*1)+2){
//	alert(str*1+2);
$("tr:eq("+i+")").css("display","block");
}else{
$("tr:eq("+i+")").css("display","none");
}
}
});

});

// --></mce:script>
</head>

<body >

<form action="/#.do" method="post" id="f1">
<table>
<tr><td>方案名称</td><td><input type="text" name="ucname" maxlength="20"/></td></tr>
<tr><td>区间个数</td><td><select name="colorcount" id="colorsel"><option value="1">1</option><option value="2">2</option>
<option value="3">3</option><option value="4">4</option><option value="5">5</option>
<option value="6">6</option><option value="7">7</option><option value="8">8</option></select></td>
</tr>
<tr style="display:block;" mce_style="display:block;"><td>区间1</td><td>下限<input type="text"name="ucmin1" maxlength="8"/></td><td>上限<input type="text" name="ucmax1"  maxlength="8"/></td><td>名称<input type="text" name="cname1"  maxlength="10"/></td>
<td>颜色<select name="col1" ><option value="1" style="background-color:green" mce_style="background-color:green">        </option><option value="2" style="background-color:yellow" mce_style="background-color:yellow"></option>
<option value="3" style="background-color:blue" mce_style="background-color:blue"></option><option value="4" style="background-color:red" mce_style="background-color:red"></option><option value="5" style="background-color:pink" mce_style="background-color:pink"></option>
<option value="6" style="background-color:lightgray" mce_style="background-color:lightgray"></option><option value="7" style="background-color:cran;font-size:14px;" mce_style="background-color:cran;font-size:14px;"></option><option value="8" style="background-color:black" mce_style="background-color:black"></option></select></td></tr>
<tr style="display:none;" mce_style="display:none;"><td>区间2</td><td>下限<input type="text" name="ucmin2"/  maxlength="8"></td><td>上限<input type="text" name="ucmax2"  maxlength="8"/></td><td>名称<input type="text" name="cname2"  maxlength="10"/></td><td>颜色<select name="col2" ><option value="1" style="background-color:green" mce_style="background-color:green">        </option><option value="2" style="background-color:yellow" mce_style="background-color:yellow"></option>
<option value="3" style="background-color:blue" mce_style="background-color:blue"></option><option value="4" style="background-color:red" mce_style="background-color:red"></option><option value="5" style="background-color:pink" mce_style="background-color:pink"></option>
<option value="6" style="background-color:lightgray" mce_style="background-color:lightgray"></option><option value="7" style="background-color:cran;font-size:14px;" mce_style="background-color:cran;font-size:14px;"></option><option value="8" style="background-color:black" mce_style="background-color:black"></option></select></td></tr>
<tr style="display:none;" mce_style="display:none;"><td>区间3</td><td>下限<input type="text" name="ucmin3"  maxlength="8"/></td><td>上限<input type="text" name="ucmax3"  maxlength="8"/></td><td>名称<input type="text" name="cname3" maxlength="10"/></td><td>颜色<select name="col3" ><option value="1" style="background-color:green" mce_style="background-color:green">        </option><option value="2" style="background-color:yellow" mce_style="background-color:yellow"></option>
<option value="3" style="background-color:blue" mce_style="background-color:blue"></option><option value="4" style="background-color:red" mce_style="background-color:red"></option><option value="5" style="background-color:pink" mce_style="background-color:pink"></option>
<option value="6" style="background-color:lightgray" mce_style="background-color:lightgray"></option><option value="7" style="background-color:cran;font-size:14px;" mce_style="background-color:cran;font-size:14px;"></option><option value="8" style="background-color:black" mce_style="background-color:black"></option></select></td></tr>
<tr style="display:none;" mce_style="display:none;"><td>区间4</td><td>下限<input type="text" name="ucmin4"  maxlength="8"/></td><td>上限<input type="text" name="ucmax4"  maxlength="8"/></td><td>名称<input type="text" name="cname4" maxlength="10"/></td><td>颜色<select name="col4" ><option value="1" style="background-color:green" mce_style="background-color:green">        </option><option value="2" style="background-color:yellow" mce_style="background-color:yellow"></option>
<option value="3" style="background-color:blue" mce_style="background-color:blue"></option><option value="4" style="background-color:red" mce_style="background-color:red"></option><option value="5" style="background-color:pink" mce_style="background-color:pink"></option>
<option value="6" style="background-color:lightgray" mce_style="background-color:lightgray"></option><option value="7" style="background-color:cran;font-size:14px;" mce_style="background-color:cran;font-size:14px;"></option><option value="8" style="background-color:black" mce_style="background-color:black"></option></select></td></tr>
<tr style="display:none;" mce_style="display:none;"><td>区间5</td><td>下限<input type="text" name="ucmin5"  maxlength="8"/></td><td>上限<input type="text" name="ucmax5"  maxlength="8"/></td><td>名称<input type="text" name="cname5" maxlength="10"/></td><td>颜色<select name="col5" ><option value="1" style="background-color:green" mce_style="background-color:green">        </option><option value="2" style="background-color:yellow" mce_style="background-color:yellow"></option>
<option value="3" style="background-color:blue" mce_style="background-color:blue"></option><option value="4" style="background-color:red" mce_style="background-color:red"></option><option value="5" style="background-color:pink" mce_style="background-color:pink"></option>
<option value="6" style="background-color:lightgray" mce_style="background-color:lightgray"></option><option value="7" style="background-color:cran;font-size:14px;" mce_style="background-color:cran;font-size:14px;"></option><option value="8" style="background-color:black" mce_style="background-color:black"></option></select></td></tr>
<tr style="display:none;" mce_style="display:none;"><td>区间6</td><td>下限<input type="text" name="ucmin6"  maxlength="8"/></td><td>上限<input type="text" name="ucmax6"  maxlength="8"/></td><td>名称<input type="text" name="cname6" maxlength="10"/></td><td>颜色<select name="col6" ><option value="1" style="background-color:green" mce_style="background-color:green">        </option><option value="2" style="background-color:yellow" mce_style="background-color:yellow"></option>
<option value="3" style="background-color:blue" mce_style="background-color:blue"></option><option value="4" style="background-color:red" mce_style="background-color:red"></option><option value="5" style="background-color:pink" mce_style="background-color:pink"></option>
<option value="6" style="background-color:lightgray" mce_style="background-color:lightgray"></option><option value="7" style="background-color:cran;font-size:14px;" mce_style="background-color:cran;font-size:14px;"></option><option value="8" style="background-color:black" mce_style="background-color:black"></option></select></td></tr>
<tr style="display:none;" mce_style="display:none;"><td>区间7</td><td>下限<input type="text" name="ucmin7"  maxlength="8"/></td><td>上限<input type="text" name="ucmax7"  maxlength="8"/></td><td>名称<input type="text" name="cname7"  maxlength="10"/></td><td>颜色<select name="col7" ><option value="1" style="background-color:green" mce_style="background-color:green">        </option><option value="2" style="background-color:yellow" mce_style="background-color:yellow"></option>
<option value="3" style="background-color:blue" mce_style="background-color:blue"></option><option value="4" style="background-color:red" mce_style="background-color:red"></option><option value="5" style="background-color:pink" mce_style="background-color:pink"></option>
<option value="6" style="background-color:lightgray" mce_style="background-color:lightgray"></option><option value="7" style="background-color:cran;font-size:14px;" mce_style="background-color:cran;font-size:14px;"></option><option value="8" style="background-color:black" mce_style="background-color:black"></option></select></td></tr>
<tr style="display:none;" mce_style="display:none;"><td>区间8</td><td>下限<input type="text" name="ucmin8"  maxlength="8"/></td><td>上限<input type="text" name="ucmax8"  maxlength="8"/></td><td>名称<input type="text" name="cname8"  maxlength="10"/></td><td>颜色<select name="col8" ><option value="1" style="background-color:green" mce_style="background-color:green">        </option><option value="2" style="background-color:yellow" mce_style="background-color:yellow"></option>
<option value="3" style="background-color:blue" mce_style="background-color:blue"></option><option value="4" style="background-color:red" mce_style="background-color:red"></option><option value="5" style="background-color:pink" mce_style="background-color:pink"></option>
<option value="6" style="background-color:lightgray" mce_style="background-color:lightgray"></option><option value="7" style="background-color:cran;font-size:14px;" mce_style="background-color:cran;font-size:14px;"></option><option value="8" style="background-color:black" mce_style="background-color:black"></option></select></td></tr>
<tr><td>其它区间<td>名称<input type="text" name="othername"/></td><td>颜色<select name="otheruc" ><option value="1" style="background-color:green" mce_style="background-color:green">        </option><option value="2" style="background-color:yellow" mce_style="background-color:yellow"></option>
<option value="3" style="background-color:blue" mce_style="background-color:blue"></option><option value="4" style="background-color:red" mce_style="background-color:red"></option><option value="5" style="background-color:pink" mce_style="background-color:pink"></option>
<option value="6" style="background-color:lightgray" mce_style="background-color:lightgray"></option><option value="7" style="background-color:cran;font-size:14px;" mce_style="background-color:cran;font-size:14px;"></option><option value="8" style="background-color:black" mce_style="background-color:black"></option></select></td><td></td><td></td></tr>
<tr><td  align="center" colspan="5" MAGENTA><input type="submit" value="提交方案"/></td>
<input type="hidden" value="dealusermap" name="status" onClick/>
</tr>

</table>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航