我想做一个打分页面
我想做一个打分页面，像EXCEL的表格给用户输入，输入的每个数字记录数据库中（数据库表中对应每列一个字段），具体如下，总分列希望自动计算前面4个数字之和，之和<=100，我打算每个格子使用<input type=text>,但感觉很不方便，这样页面上一大堆input框，操作效率，不用excel快捷，各位有无好的建议做这样的打分页面，方便用户操作。A列(字能输入1-10) B列(字能输入1-10) C列(字能输入1-20) D列(字能输入1-60) 总分列
行1 .. .. .. .. .. (之和<100)
行2 .. .. .. .. .. (之和<100) 行3 .. .. .. .. .. (之和<100)
行4 .. .. .. .. .. (之和<100)
................................................................ 但是要輸入，總是要用<input type="text">的啊
可以參考google doc的方法，點擊表格框再生成input,輸入后刪除input
[ 本帖最后由 xfdipzone 于 2010-5-12 14:11 编辑 ] 把input的边框设为无，背景色跟单元格一样。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>新闻批量编辑</title>
<style type="text/css">
<!--
.tableBorder {
width:98%;
margin:0 auto;
border: 1px #89C3E4 solid;
background-color: #FFFFFF;
font:12px;
}
.tableBorder td,.tableBorder th{
background-color:#E9F5F5;
}
.tableBorder th{
background-color:#E9F5F5;
height:32px;
}
.W100 {
height:21px;
line-height:21px;
width:90%;
border:none;
background-color:#E9F5F5;
}
-->
</style>
</head><body>
<form action="" method="get" name="form1" id="form1">
<table class="tableBorder" cellspacing="1">
<tr>
<th width="8%">点击全选</th>
<th width="4%">审核</th>
<th width="4%">推荐</th>
<th width="5%">置顶</th>
<th width="4%">热点</th>
<th width="36%">资讯标题</th>
<th width="14%">关键字</th>
</tr>
<tr>
<td align="center"><input name="id" type="checkbox" value="7264" /></td>
<td align="center"><input name="State7" type="text" class="W100" maxlength="1" value="1" /></td>
<td align="center"><input name="State8" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsTop" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsHome" type="text" class="W100" maxlength="1" value="0" /></td>
<td><input name="Title" type="text" class="W100" value="建平县马场镇出台有效措施 公路绿化也是致富商机" /></td>
<td><input name="KeyWord" type="text" class="W100" value="公路绿化 公路 致富" /></td>
</tr>
<tr>
<td align="center"><input name="id" type="checkbox" value="7263" /></td>
<td align="center"><input name="State7" type="text" class="W100" maxlength="1" value="1" /></td>
<td align="center"><input name="State8" type="text" class="W100" maxlength="1" value="1" /></td>
<td align="center"><input name="IsTop" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsHome" type="text" class="W100" maxlength="1" value="0" /></td>
<td><input name="Title" type="text" class="W100" value="广州市迎亚运绿化工程今年将打造亮点工程" /></td>
<td><input name="KeyWord" type="text" class="W100" value="亚运 绿化工程" /></td>
</tr>
<tr>
<td align="center"><input name="id" type="checkbox" value="7262" /></td>
<td align="center"><input name="State7" type="text" class="W100" maxlength="1" value="1" /></td>
<td align="center"><input name="State8" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsTop" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsHome" type="text" class="W100" maxlength="1" value="0" /></td>
<td><input name="Title" type="text" class="W100" value="潍坊投资1.46亿进行公路绿化补植苗木" /></td>
<td><input name="KeyWord" type="text" class="W100" value="公路绿化 公路" /></td>
</tr>
<tr>
<td align="center"><input name="id" type="checkbox" value="7261" /></td>
<td align="center"><input name="State7" type="text" class="W100" maxlength="1" value="1" /></td>
<td align="center"><input name="State8" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsTop" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsHome" type="text" class="W100" maxlength="1" value="0" /></td>
<td><input name="Title" type="text" class="W100" value="居民承包小区空花坛建“开心农场” 实现自助绿化" /></td>
<td><input name="KeyWord" type="text" class="W100" value="绿化 开心农场" /></td>
</tr>
<tr>
<td align="center"><input name="id" type="checkbox" value="7260" /></td>
<td align="center"><input name="State7" type="text" class="W100" maxlength="1" value="1" /></td>
<td align="center"><input name="State8" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsTop" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsHome" type="text" class="W100" maxlength="1" value="0" /></td>
<td><input name="Title" type="text" class="W100" value="菏泽牡丹种植基地5年内种植基地将达到20万亩" /></td>
<td><input name="KeyWord" type="text" class="W100" value="牡丹 种植基地" /></td>
</tr>
<tr>
<td align="center"><input name="id" type="checkbox" value="7259" /></td>
<td align="center"><input name="State7" type="text" class="W100" maxlength="1" value="1" /></td>
<td align="center"><input name="State8" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsTop" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsHome" type="text" class="W100" maxlength="1" value="0" /></td>
<td><input name="Title" type="text" class="W100" value="北京植物园的牡丹花像人脸那么大" /></td>
<td><input name="KeyWord" type="text" class="W100" value="北京植物园 牡丹" /></td>
</tr>
<tr>
<td align="center"><input name="id" type="checkbox" value="7258" /></td>
<td align="center"><input name="State7" type="text" class="W100" maxlength="1" value="1" /></td>
<td align="center"><input name="State8" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsTop" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsHome" type="text" class="W100" maxlength="1" value="0" /></td>
<td><input name="Title" type="text" class="W100" value="杭州市园文局绿化办送出100棵樱花苗木" /></td>
<td><input name="KeyWord" type="text" class="W100" value="绿化办 樱花" /></td>
</tr>
<tr>
<td align="center"><input name="id" type="checkbox" value="7257" /></td>
<td align="center"><input name="State7" type="text" class="W100" maxlength="1" value="1" /></td>
<td align="center"><input name="State8" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsTop" type="text" class="W100" maxlength="1" value="0" /></td>
<td align="center"><input name="IsHome" type="text" class="W100" maxlength="1" value="0" /></td>
<td><input name="Title" type="text" class="W100" value="云南出台古树名木防雷电技术规范" /></td>
<td><input name="KeyWord" type="text" class="W100" value="古树 防雷" /></td>
</tr>
<tr>
<td> </td>
<td colspan="6" class="listbottom">
<input type="button" value="保存本表数据" />
<input type="button" value="删除选中的资讯" />
(本表的内容可直接像EXCEL一样编缉，最后要点[保存本表数据]有会生效。)
</td>
</tr>
</table>
</form>
</body>
</html>
[ 本帖最后由 网页修行 于 2010-5-17 11:32 编辑 ] 能够做到每列数字有输入范围限制（比如第一列只能数入1=10，第二列输入1-5等等），另外能否做到数字输入框获得焦点后自动弹出一个选择数字的层，供用户选择规定范围的数字 能啊，编写好相应的代码就行了。
页:
[1]