Javascript实现把checkbox从两个动态table中迁移

 

做评教是遇到这样一个问题，把一组被测评人先显示在页面的table中，然后当选中某一个人时，在另一个table中把他显示出来。

遇到的问题如下：

1、 
被测评人是不固定的，所以源table是只能动态添加。所以每个被测评人所对应的ID就只能动态添加。

2、 
新table的数据依靠源table选过来，所以也是动态的，我们先创建一个空表格，然后往里面填充被测评人。

3、 
如果源表格的取消选中，则新表格中的被测评人也需要取消。

下面是解决思路：

1、先解决动态添加的被测评人的选中事件

 

//创建table的行业列，以此把被测评人写入到table中

TableRow row1 = new TableRow();

TableCell cell1 = new TableCell();

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

{

//显示参评者：复选框列表

CheckBox chkCritics = new CheckBox();

chkCritics.ID=dtEligibleByCritics.Rows[i][0].ToString();

chkCritics.Attributes.Add("name","datAllSeries");

chkCritics.Text =dtEligibleByCritics.Rows[i][1].ToString();

//给每一个checkbox控件添加单击事件，传递他的ID值和text值给javascript

chkCritics.Attributes.Add("onclick","javascript:SelectOne( '" + chkCritics.ID + "','" +chkCritics.Text

+"' )");

//填充单元格TableCell,参评者信息列表

cell1.Controls.Add(chkCritics);

row1.Cells.Add(cell1);

cell1.ID = "cell"+ datAllSeries.Rows[x][0].ToString();

HolderTable.Rows.Add(row1);

}

 

2、 
执行checkbox的单击事件（javascript代码）

functionSelectOne(id, value) {

//获得所选中checkbox的值，因为checkbox在table中，所以ID值有所变化，只要运行一下，查看原码，就会发现它的ID前加的前缀了

var checkbox =document.getElementById("ContentPlaceHolder2_" + id);

//根据ID获取新table

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

//如何选中，则把被考核人添加到table中,如果取消选取，则把被考核人从table

//中删掉

if (checkbox.checked) {

//table中所有的单元格数

cell = tab1.cells.length;

//table 中行数

n = tab1.rows.length;

//table 中的列数

cell = cell / n;

//向table中加入行

r = tab1.insertRow(n);

//向每一行加入元素

//注：这里加入行是通过html语句来实现的。

r.insertCell(0).innerHTML = '<inputtype="checkbox" Name="selCheck" value= "' + id + '"//>' + value +'';

//checkbox 是表这一行的其他单元格填充label，以备后面填充数据

for ( i = 1 ; i < cell-1; i ++)

{

r.insertCell(i).innerHTML ='<label name = "assessScore" style="color:red"  id ="score' + id + i +'">0</label>';

}

r.insertCell(cell).innerHTML ='<label name = "assessScore" style="color:red id="score' + id + cell + '">0</label>';

}

else {    //如果把源表格中的选中取消，则循环遍历新表格，把新表格中的数据删除。

for (i = 1; i < tab1.rows.length;i++) {

//            alert(value);

//            alert();

value = value.replace(/[]/g,"");

var deleteValue =tab1.rows[i].cells[0].innerText;

deleteValue=deleteValue.replace(/[]/g,"");

if (value == deleteValue)

{

tab1.deleteRow(i);

break;

}

}

}

}

 

 

 

具体的一步步实现在注释中表明的很清楚，最终的显示效果为：

未选中是的界面：



选中和取消选取是新表格随之变动。



 

 

最后，不得不说，javascript很强大！