表格中的一些字段随着另一些字段动态改变

在设置评分中遇到这样一个问题：

 

如图：



列名中的“职业道德”都从数据库中获取，且项目不固定，随着数据库表的改动而改动。

请选择分值中为（ABCDE。。。不固定），每一项代表的分数也不固定，随着数据库表的改动而改动。

我们需要对姓名中选择的人进行评分（可多选）即选中人的对应项随着下拉框的改动而改动。

我们需要统计每个人的总分（比如A对应20分，B对应16分）。

 

下面我说一下做法：

首先，我们需要创建表头（我使用的是在后台绑定html代码，如果有更好的，欢迎大家交流）：

 

string strScoreHTML;

strScoreHTML = "";

//通过循环，把选项ABCD填充到html中，再把每个选项的分值设置成select的value

for (int i = 0; i < dattabScore.Rows.Count; i++)

{

strScoreHTML = strScoreHTML +"<option value=\"" + dattabScore.Rows[i][3] +"\">" + dattabScore.Rows[i][1] + "</option>";

}

strScoreHTML = strScoreHTML + "</select>";

MgrSetAssessProject tabAssess = new MgrSetAssessProject();

//定义DataTable表datAssess,用于查询所有可用考核项目信息

DataTable dattabAssess = new DataTable();

dattabAssess = tabAssess.QueryAllAssessProject();

string strHTML;

//设置表格的第一列表头

strHTML = "<table id=\"criticsTab\" cellspacing=\"0\" ><trclass=\"tabTitle\"><td class=\"tabRowName\">姓名</td>";

//通过循环，把其他表头设置好，注意，这里要把之前设置上的下拉框添加进入。

//注意，添加下拉框是每一个要加上下拉框的onchange事件，为以后改变下拉框的值而改变所选人对应的分值做准备。

for (int i = 0; i < dattabAssess.Rows.Count; i++)

{

strHTML = strHTML + "<td><label id=\"assess" + (i + 1) + "\"title=" + dattabAssess.Rows[i][0].ToString() + "></label>" + dattabAssess.Rows[i][1] + " <select  id=\"" + (i + 1) +"\"  onchange=(seloption(this))><optionvalue=\"initScore\" selected=\"selected\">请选择分值</option>"+ strScoreHTML + "</td>";

}

//设置总分

strHTML = strHTML + "<td class =\"tabAllScore\">总分</td></tr></table>";

//在后台建立id为tabContent的div，把以上THML代码填充进入，就把表格设置好了。

tabContent.InnerHtml = strHTML;

 

 

上面的html代码看起来很烦，其实只要先在dreamweaver中写好，然后粘贴过来，把需要替换的字段替换上，做起了还是很容易的。（一个小小的技巧）

 

 

添加被测评人上篇博客已经说过了。

 

下面，通过下拉框的onchange事件，改变所对应单元格的值。

 

//切换下拉框事件

function seloption() {

//获取table

var tab1 = document.getElementById("criticsTab");

//table中所有的单元格数

cell = tab1.cells.length;

//table 中行数

n = tab1.rows.length;

//table 中的列数

cell = cell / n;

//获取当前下拉框

var srcElem = document.activeElement //取到当前焦点控件

var selectIndex = srcElem.selectedIndex; //获得当前下拉菜单所选中的索引值

//获取项目编号

var assess = document.getElementById("assess" + srcElem.id);

var assessID = assess.title

//获取分数

var accessAllScore = srcElem.value;

//姓名列中对应的人员组

var checkbox = document.getElementsByName("selCheck");

//循环checkbox，判断是否被选中

//判断是否选中，选中则给每一项赋值

for (i = 0; i < checkbox.length; i++)

{

//被选中的checkbox

if (checkbox[i].checked)

{

//alert(i);

//改变单元格的值（这里我使用的是先删除单元格，然后再添加，没有找到直接修改的方法）

tab1.rows[i + 1].deleteCell(srcElem.id);

//这里填充单元格填充了一个label用来放分数，为了方便后面的计算总分，在把他的visible设置成不可见即可

tab1.rows[i + 1].insertCell(srcElem.id).innerHTML = '<label name = "assessScore"id =score' + checkbox[i].value + srcElem.id + '>' + srcElem.value +'</label>' + srcElem[selectIndex].text + '';

document.getElementById("score" + checkbox[i].value +srcElem.id ).style.display = "none"; //设置下面的table不可见

var AllScore = 0;

//计算总分

for (j = 1; j < cell-1 ; j++) {

//获取上面建立的table，然后根据table的outerText属性来获取分值，将本行的分值全部加起来，即为总分

var score =document.getElementById("score" + checkbox[i].value + j +"");

AllScore =  Number(AllScore) + Number(score.outerText)

}

//填充总分项

tab1.rows[i + 1].deleteCell(cell-1);

tab1.rows[i + 1].insertCell(cell-1).innerHTML = '<label name ="assessScore" id =score' + checkbox[i].value + srcElem.id + '>' +AllScore + '</label>';

var criticsID = checkbox[i].value;

}

}

//把下拉框改为默认选项（也可以不设置，看需求而定）

srcElem.options[0].selected = true;

}

 

 

最终，呈现出来的就是我们所需要的表格，当然，我们可以再表格切换时用ajax将数据写入到数据库中，实现无刷新的测评，当然，因为初次评分为了达到一种直观的效果，没有使用该方法，而在重新测评时就用到了，这里用到挺多知识点，除了最常用的获取控件，还有添加表格删除单元格，设置下拉框的默认值等等。

 

最后，做界面往往不要依赖于给定的控件，虽然控件很简单很好用，但是，当我们的需求很灵活时，往往控件就满足不了我们了，试着手写一些东西，也是很有意义的。