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

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

 

如图：

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

请选择分值中为（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) +"\"  οnchange=(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将数据写入到数据库中，实现无刷新的测评，当然，因为初次评分为了达到一种直观的效果，没有使用该方法，而在重新测评时就用到了，这里用到挺多知识点，除了最常用的获取控件，还有添加表格删除单元格，设置下拉框的默认值等等。

 

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