一、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=\"width: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>