一、js动态生成、删除tr
在页面的操作中，我们往往会对table进行操作，例如增加一行，删除一行。查过好多资料，有好多方法。在具体实践中，我所涉及的需求是：
通过对js方法add（）传参数，然后把参数按照顺序分别具体的自动添加在所tr上，然后点击tr的“删除”button来出发moveTr()对这一行进行删除操作。
具体代码如下，仅供参考：
//增加table中的“tr”，并给“td”赋值。
<script type="text/javascript">
var id; //此id是自己设置，用作删除
function add(a,b,c,d,e,f){
id++;
var theTable = document.getElementById("table");//table的id
var rowCount = theTable.rows.length; //获得当前表格的行数
var row = theTable.insertRow(rowCount);//在tale里动态的增加tr
row.id=id;
var cell1 = row.insertCell(0);//在tr中动态的增加td
cell1.innerHTML="<input type="text" style="80%" />";
var cell2 = row.insertCell(1); //在tr中再动态的增加td
cell2.innerText=e;
var cell3 = row.insertCell(2); //在tr中再动态的增加td
//cell3.innerHTML="<input type="button" value="删除" class="btn" onclick="moveTr('"+id+"');" >"; //删除按钮
Cell3.innerHTML="<a href="#" title="删除" onclick="moveTr('"+id+"');"><i class="icon-trash"></i></a>"; //删除图标
var cell4 = row.insertCell(3);//在tr中动态的增加 一个id
cell4.innerHTML="<input value=""+f+""/>"; //此行时隐藏行，有些字段不需要显示，但是必须存在
cell1.style.cssText="text-align:center"; //tr中内容居中显示
cell2.style.cssText="text-align:center";
cell3.style.cssText="text-align:center";
cell14.style.cssText="display:none;" //tr隐藏
}
</script>
//删除table中的“tr”，并取出具体“td”的值。
<script type="text/javascript">
function moveTr(id){
var tb=document.getElementById('table01'); //获取table
var tr=document.getElementById(id); //根据id获取具体的tr
var r = tb.rows; //得到此table的所有行信息
var a4 = r[tr.rowIndex].childNodes[3].innerText;//根据id查找兄弟属性值 tr.rowIndex为此行所在的行数
var bool= window.confirm("您确定删除项目""+a4+""吗?");
if(bool){
tb.deleteRow(tr.rowIndex); //删除行
unit(); //调用此方法，对界面有些地方的value进行更新
}
else{
return;
}
}
</script>
二、子页面调父页面的js方法
在操作过程中，有时需要这样的做法：
在父页面需要动态增加tr，但是此tr需要在另外一张表选择，但在操作期间，父页面不可以刷新，不可以跳转，这就需要弹出窗口，然后在新的窗口中，选择checkbox的参数id（把checkbox的value设置为项目id，而不是序号），根据此id通过ajax异步操作来获取所需要的字段，来传递给js方法中，在js方法中调用父页面js方法，来对父页面实现动态的增加。
我所做的代码如下：
1、 弹出窗口代码：
window.open('<%=path%>/prolm/directorWorkshops/meetinginfoView.jsp?','','width=800,height=600,top='+(screen.height-750)/2+',left='+(screen.width-1010)/2+',status=yes,titlebar=no,toolbar=no,scrollbars=yes,resizable=no');
2、 调用父页面的js方法
function save(a,b){
window.opener.document.getElementById("name").innerHTML="张三";
window.opener.window.a(a,b);
}
三、使用checkbox或id来获得table下所有tr的所有td
<script type="text/javascript">
function getTr() {
var str = "";
var tab = document.getElementById("tableId");
var rows = tab.rows;
for ( var i = 1; i < rows.length; i++) {
//从第二行开始，第一行为标识
var a1 = rows[i].cells[0].getElementsByTagName('input')[0].value;
var a2 = rows[i].cells[1].getElementsByTagName('input')[0].value;
//第一、二列为input输入框
var a3 = rows[i].childNodes[2].innerText;
var a4 = rows[i].childNodes[3].innerText;
var a5 = rows[i].childNodes[4].innerText;
var a6 = rows[i].childNodes[5].innerText;
var a7 = rows[i].childNodes[6].innerText;
str = str + a1 + "||" + a2 + "||" + a3 + "||" + a4 + "||" + a5
+ "||" + a6 + "||" + a7 + "|||";
}
document.getElementById("hidstr").value = str;
//此行是把所有的table信息赋值为一个隐藏域，属性为“hidstr”，在action可以直接取其值，然后再对其进行拆分。
}
</script>
四、对js数组的去重
<script type="text/javascript">
var strs = str.split("||");
for ( var i = 0; i < strs.length; i++) {
if(!json[strs[i]]){
res.push(strs[i]);
json[strs[i]] = 1;
}
}
document.getElementById("unit_peo").value =res;
}
</script>