<script type="text/javascript">
 var i = 0;
 function addRow(){
  var tabEle = document.getElementById("tab_1");
  var addTr = tabEle.insertRow();
  addTr.setAttribute("id", "tr_"+i);
  
  var td_1 = addTr.insertCell();
  td_1.setAttribute("id", "td_"+i+"_1");
  var td_2 = addTr.insertCell();
  td_2.setAttribute("id", "td_"+i+"_2");
  var td_3 = addTr.insertCell();
  td_3.setAttribute("id", "td_"+i+"_3");
  var td_4 = addTr.insertCell();
  td_4.setAttribute("id", "td_"+i+"_4");
  var td_5 = addTr.insertCell();
  td_5.setAttribute("id", "td_"+i+"_5");
  td_1.innerHTML="<input type='text' id='txt_"+i+"_1' width='120px'>  ";
  td_2.innerHTML="<input type='text' id='txt_"+i+"_2' size='6'>  ";
  td_3.innerHTML="<input type='text' id='txt_"+i+"_3' size='6'>  ";
  td_4.innerHTML="<div style='width:120px;'><input type='radio' name='rad_"+i+"_4' checked value='↑'>↑<input type='radio' name='rad_"+i+"_4' value='↓'>↓<input type='radio' name='rad_"+i+"_4' value='-'>- </div>  ";
  td_5.innerHTML="<div style='width:60px;'><button  οnclick='deleteRow("+i+");'>删除</button></div>";
  i++;
 }
 
 
 function deleteRow(index){
  var tabEle = document.getElementById("tab_1");
  var currentRow = document.getElementById("tr_"+index);
  tabEle.deleteRow(currentRow.rowIndex);
 }
 
 function createHtm(){
  var testEle = document.getElementById("div_new");
  var htmlValue = document.getElementById("div_1").innerHTML;
  
  htmlValue = htmlValue.replace("tab_1", "tab_new");
  htmlValue = htmlValue.replaceAll("tr_", "tr_new_");
  htmlValue = htmlValue.replaceAll("td_", "td_new_");
  htmlValue = htmlValue.replaceAll("txt_", "txt_new_");
  htmlValue = htmlValue.replaceAll("rad_", "rad_new_");
  testEle.innerHTML=htmlValue;
  
  updateHtmValue();
  
  var NewDivEle = document.getElementById("div_new");
  document.getElementById("txt_htmlValue").value = NewDivEle.innerHTML;
  document.getElementById("htmlIndex").value = getGeneralIndex();
  //alert(document.all.xlpmForm.innerHTML);
  document.all.xlpmForm.submit();
  
 }
 
 function updateHtmValue(){
  
  var tabNewEle = document.getElementById("tab_new");
  var trNodes = tabNewEle.childNodes[0].childNodes;
  for(var k = 0; k < trNodes.length; k++){
   //var trId = trNodes[k].getAttribute("id"); 
   if(trNodes[k] && trNodes[k].childNodes.length >= 4){
    trNodes[k].deleteCell(4);
   }
  }
  
  var itemValue = "";
  var itemTrEle = null;
  var itemTxtEle = null;
  var itemParentEle = null;
  for(var k = 0; k <= i; k++){
   for(var j = 1; j < 5; j++){
    itemParentEle = document.getElementById("td_new_"+k+"_"+j);
    if(!itemParentEle){
     continue;
    }
    if(j == 4){
      itemTxtEle = document.getElementsByName("rad_new_"+k+"_"+j);
      for(var n = 0; n < itemTxtEle.length; n++){
       if(itemTxtEle[n].checked){
        itemValue = itemTxtEle[n].value;
        break;
       }
      }
      if(itemValue == "↑"){
       itemParentEle.innerHTML = "<FONT color=#00ff00><B>"+itemValue+"</B></FONT>";
      }else if(itemValue == "↓"){
       itemParentEle.innerHTML = "<FONT color=#ff0000><B>"+itemValue+"</B></FONT>";
      }else if(itemValue == "-"){
       itemParentEle.innerHTML = "<FONT color=#000000><B>"+itemValue+"</B></FONT>";
      }else{
       itemParentEle.innerHTML = "<B>"+itemValue+"</B>";
      }
    }else{
      itemTxtEle = document.getElementById("txt_new_"+k+"_"+j);
      if(itemTxtEle){
       itemParentEle.innerHTML = itemTxtEle.value;
      } 
    }
   }
   
  }
 }
 
 function getGeneralIndex(){
  var indexValue = "1";
  var indexEle = document.getElementsByName("theIndex");
  for(var n = 0; n < indexEle.length; n++){
   if(indexEle[n].checked){
    indexValue = indexEle[n].value;
    break;
   }
  }
  return indexValue;
 }
 
 String.prototype.replaceAll= function(s1, s2){
  return this.replace(new RegExp(s1, "gm"), s2);
 }
 
</script>
</head>
<body scroll = "no" style="background-color:#EAEFF8; margin:0 0 0 0;">  
  <form id="xlpmForm" name="xlpmForm" method="post" action="xlpmCreate.jsp">
    <input id="userName" name="userName" type="hidden"  value="<%=userName %>"/>
    <input id="userPwd" name="userPwd" type="hidden"  value="<%=userPwd %>"/>
    <input id="txt_htmlValue" name="txt_htmlValue" type="hidden"  />
    <input id="htmlIndex" name="htmlIndex" type="hidden" />
  </form>
  <br />
  
  <table width="350px">
   <tr>
    <td width="150px">
     <input type="radio" name="theIndex" checked="checked"  value="1" />序列一
     <input type="radio" name="theIndex"  value="2" />序列二
    </td>
    <td >
     <button οnclick="addRow();">增加新行</button>  
     <button οnclick="createHtm();">生成htm</button>
    </td>
   </tr>
  </table>
  <div id="div_1">
   <TABLE id="tab_1" cellSpacing=1 cellPadding=0 width=315 border=0>
    <TR id="tr_head">
        <TD bgColor=#e3e3e3 height=16><STRONG>单位</STRONG></TD>
        <TD bgColor=#e3e3e3><STRONG>分数</STRONG></TD>
        <TD bgColor=#e3e3e3><STRONG>名次</STRONG></TD>
        <TD bgColor=#e3e3e3><STRONG>异动</STRONG></TD>
     <TD bgColor=#e3e3e3 width="150px"><STRONG>操作</STRONG></TD>
      <TR>
      </table>
  </div>
  
  <div id="div_new" style="visibility:hidden"> </div>
</body>