js 动态操作表格

<link href="${base }/res/cc/css/css.css" rel="stylesheet" type="text/css" />
<link href="${base }/res/app/css/public.css" rel="stylesheet" type="text/css" />
<body>
<div class="main-div">
 
  <div class="right-div">
  <@p.form action="query.aj" refreshId="list-page" class="ajaxfrm" method="post" stopRefresh=false id="queryForm">
      <table width="960" border="0" cellpadding="0" cellspacing="5" class="txt-s">
          <tr>
              <td>商品名称:<input type="text"/>商品编号:<input type="text"/></td>
          </tr>
          <tr>
              <td>按商品类目:
                  <SELECT>
                    <OPTION selected value="全部一级类目">全部一级类目</OPTION>
                    <OPTION  value="一级类目1">一级类目1</OPTION>
                    <OPTION  value="一级类目2">一级类目2</OPTION>
                </SELECT>
                <SELECT>
                    <OPTION selected value="全部二级类目">全部二级类目</OPTION>
                    <OPTION  value="二级类目1">二级类目1</OPTION>
                    <OPTION  value="二级类目2">二级类目2</OPTION>
                </SELECT>
              </td>
          </tr>
          <tr>
              <td>
              按商品品牌:
              <SELECT id="u342" class="u342 u342_text_sketch"   >
                <OPTION selected value="全部品牌">全部品牌</OPTION>
                <OPTION  value="品牌1">品牌1</OPTION>
                <OPTION  value="品牌2">品牌2</OPTION>
            </SELECT>
            <span style="padding-left:6cm;"><input type="submit" value="查询"/></span>
            </td>
          </tr>
      </table>
  </@p.form>
    <table width="960" border="0" cellpadding="0" cellspacing="5" class="txt-s">
      <tr>
        <td width="945" align="center"><table width="960" border="0" cellspacing="0" cellpadding="5">
            <tr>
              <td width="940"><table width="950" border="0" cellpadding="5" cellspacing="1" class="bg-g">
                  <tr>
                    <td bgcolor="#FFFFFF">商品编号</td>
                    <td bgcolor="#FFFFFF">商品名称</td>
                    <td bgcolor="#FFFFFF">商品品牌</td>
                    <td bgcolor="#FFFFFF">销售价</td>
                    <td bgcolor="#FFFFFF">操作</td>
                  </tr>

           <#list list as row>
                  <tr>
                    <td bgcolor="#FFFFFF">${row.commSpu}</td>
                    <td bgcolor="#FFFFFF">${row.commName}</td>
                    <td bgcolor="#FFFFFF">${row.brandName}</td>
                    <td bgcolor="#FFFFFF">${row.lowSellMoney}</td>
                    <td bgcolor="#FFFFFF"><input type="button" value="选择" onclick="selectPro(this.parentNode.parentNode)"/></td>
                  </tr>
            </#list>
                
                </table></td>
            </tr>
          </table>
          <tr>
     <td colspan="2" align="center">
            <@p.pagination  value=page />
     </td>
      </tr>
      </tr>
    </table>
    <br/>
    <div id="u346_rtf"><p style="text-align:center;">
    <span style="font-family:微软雅黑;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;">已选定商品</span></p></div>
    </div>
    <br/>
    <@p.form action="signup.aj" refreshId="list-page" class="ajaxfrm" method="post" stopRefresh=false id="signupForm">
    <table width="960" border="0" cellpadding="0" cellspacing="5" class="txt-s">
      <tr>
        <td width="945" align="center">
        <table width="960" border="0" cellspacing="0" cellpadding="5">
            <tr>
              <td width="940"><table width="950" border="0" cellpadding="5" cellspacing="1" class="bg-g" id="selectTable">
                  <tr>
                    <td bgcolor="#CCCCCC">商品编号</td>
                    <td bgcolor="#CCCCCC">商品名称</td>
                    <td bgcolor="#CCCCCC">商品品牌</td>
                    <td bgcolor="#CCCCCC">销售价</td>
                     <td bgcolor="#CCCCCC">推荐</td>
                    <td bgcolor="#CCCCCC">操作</td>
                  </tr>
                
                </table>
            </td>
           </tr>
          </table>
          <tr>
      </tr>
      </tr>
      <tr>
          <td align="center"><input type="submit" value="&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;" onclick="submitForm();"/>&nbsp;&nbsp;
          <input type="button" value="&nbsp;&nbsp;&nbsp;&nbsp;取&nbsp;&nbsp;消&nbsp;&nbsp;&nbsp;&nbsp;" onclick="javascript:window.close()" /></td>
      </tr>
    </table>
    </@p.form>
  </div>
  <div class="footer">版权信息</div>
</div>
<script type="text/javascript">

/**
 * 选择商品
*/
function selectPro(selectRow){
    var table = document.getElementById("selectTable");
    var proId = selectRow.cells[0].innerText;
    //判断商品编号是否重复
    var rows = table.rows;
    for(var i = 0; i < rows.length;i ++){
        var r = rows[i];
        if(proId == r.cells[0].innerText){
            alert("该商品不能重复选择!");
            return;
        }
    }
    var row = table.insertRow(1);
    row.style.backgroundColor="#FFFFFF";
    for(var i = 3; i >= 0; i--){
        var cell = row.insertCell();
        cell.innerHTML = selectRow.cells[i].innerHTML;
    }
    row.insertCell(4).innerHTML = "<input type='checkbox' checked='true' name='proList' value='" + selectRow.cells[0].innerText + "'/>";
    row.insertCell(5).innerHTML = "<input type='button' value='取消' onclick='deletePro(this.parentNode.parentNode.rowIndex)'/>";
    
}
/**
 * 删除一行
*/
function deletePro(rowIndex){
    var table = document.getElementById("selectTable");
    if(table.rows.length > 0){
        table.deleteRow(rowIndex);
    }
}
function submitForm(){
    
    window.opener.location.href=window.opener.location.href;
    window.close();
 
}
</script>