js 新增和删除表格

来源：互联网发布：js实现滑动选择日期编辑：程序博客网时间：2024/05/16 19:57

<%@ Page language="c#" Codebehind="F080424.aspx.cs" AutoEventWireup="false" Inherits="DHCWF.WFSystem.BusinessWeb.F08.WebUI.F080424" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
  <title>Table对象的方法</title>
  <script language="JavaScript">
var intRowIndex = 0;
var edit_flag=0;
function insertRow(tbIndex){
   var objRow = myTable.insertRow(tbIndex);

   if(document.Form1.ITEM_NAME.value=="")
   {
     alert("控件名称不能为空");
     return;
   }

   var objCel = objRow.insertCell(0);
   objCel.innerText = document.getElementsByName("ITEM_NAME")[0].value;

   var objCel = objRow.insertCell(1);
   objCel.innerText = document.getElementsByName("ITEM_VALUE")[0].value;
   objRow.attachEvent("onclick", getIndex);
   objRow.style.background = "pink";

   var objCel = objRow.insertCell(2);
   objCel.innerText = document.getElementsByName("ITEM_SIZE")[0].value;
}
function deleteRow(tbIndex){
   myTable.deleteRow(tbIndex);
}
function getIndex(){
   intRowIndex = event.srcElement.parentElement.rowIndex;
   //pos.innerText = intRowIndex;
}

function my_submit()
{

var theTitle=null;
var theValue=null;
var theName=null;
if(edit_flag==0)
{
        alert("aa");
   theName='<%=ctrlName%>';
   var parent_window = parent.dialogArguments;
      var tb=document.getElementById("myTable");    //获取table对像
      var rows=tb.rows;
      var arrayObj = new Array();　
      var temp=null;

      for(var i=1;i<rows.length;i++){    //--循环所有的行

        var cells=rows[i].cells;
        theTitle=cells[0].innerHTML.replace("\"",""");
     theValue=cells[1].innerHTML.replace("\"",""");
        control_html="<input type=radio title=\""+theTitle+"\" value=\""+theValue+"\" style=\"font-size:"+cells[2].innerHTML+"\" name='"+theName+"'>";
        parent_window.EDIT_HTML.insertHtml(control_html);
        temp=theName+","+theTitle+","+theValue;
        arrayObj[i]=temp;

}
F080424.SaveFormItem(arrayObj);

}
else
{

}

window.close();
}

  </script>
</HEAD>
<body onload="pos.innerText=intRowIndex;">
  <form id="Form1" method="post" runat="server">
   <table>
    <tr class="TableContent">
     <td nowrap>控件名称：
     </td>
     <td nowrap>
      <Input id="ITEM_NAME" type="text" class="SmallInput" size="20">
     </td>
    </tr>
    <tr class="TableContent">
     <td nowrap>默认值：
     </td>
     <td nowrap>
      <Input name="ITEM_VALUE" type="text" class="SmallInput" size="20">
     </td>
    </tr>
    <tr class="TableContent">
     <td nowrap>字体大小：
     </td>
     <td nowrap>
      <Input name="ITEM_SIZE" type="text" class="SmallInput" size="20" title="可选，默认13像素">
     </td>
    </tr>
    <tr class="TableContent">
     <td colspan="2">
      <input type="button" onclick="insertRow(myTable.rows.length)" value="插入行"> <input type="button" onclick="deleteRow(intRowIndex)" value="删除行">
     </td>
    </tr>
    <tr>
     <td colspan="2">
      <table id="myTable" border="1">
       <tr onclick="getIndex()">
        <td>控件名称</td>
        <td>默认值</td>
        <td>字体大小</td>
       </tr>
      </table>
     </td>
    </tr>
    <tr class="TableContent">
     <td class="TableControl" colspan="2" align="center">
      <input type="button" onclick="my_submit();" value="确定" class="SmallButton">
     </td>
    </tr>
   </table>
   <div id="pos" style="DISPLAY:none"><FONT face="宋体"></FONT></div>
  </form>
</body>
</HTML>