如何动态添加表格行，并在后台代码中控制添加的状态状态

Question

对于第一个问题，尝试用js的cloneNode，但发现一个问题，页面的任何一个autopostback都会把之前添加的行删除，有无办法做到部分刷新？
对于第二个问题，表格中有个按钮，在页面的某些状态下该按钮必须置为无效状态，如果是input的HTML控件，如何控制它的readonly？如果换为asp:button则每次点击后都会出现上面第一个问题，即新增的表格行被删除。
已经折腾两天了，求帮忙>_<

Answer 1

var table = document.createElement('table'), 
    tr = document.createElement('tr'), 
    td = document.createElement('td');
    table.cellPadding = 0, table.cellSpacing = 1, table.border = 1;
    td.width = 80, td.height = 24;
    for (i = 0; i < _td; i++) {
        tr.appendChild(td.cloneNode(true));
    }
    for (i = 0; i < _tr; i++) {
        table.appendChild(tr.cloneNode(true));
    }
    document.body.appendChild(table);将新增的 标签 的name 赋给已知的标签
例如 hidden.value
通过HIdden，request.form取值

Answer 2

额……我不是很清楚，新增的TextBox每次autopostback都会自动丢失，把新增TextBox的ID传给标签么？
js我参考之前csdn的脚本写了一段……

Answer 3

如原有table有三列,如下:
        <table id="tb"  border="1" width="400">
            <tr>
                <td></td><td></td><td></td>
            </tr>
         </table>         点Button加一行,如下:
         <input id="Button1" type="button" value="button" onclick="addline(1,0)" />         加一个隐藏域用来记录添加的行数,用于回发恢复
          <input id="Hidden1" type="hidden" runat="server" />
js:
    <script type="text/javascript">
        function addline(trCount,flag) {
            var tb=document.getElementById("tb");
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            td.height = 20;
            for (i = 0; i < 3; i++) {
                tr.appendChild(td.cloneNode(true));
            }
            for (i = 0; i < trCount; i++) {
                tb.appendChild(tr.cloneNode(true));
            }            if (flag == 0) {
                if (document.getElementById("Hidden1").value == "")
                    document.getElementById("Hidden1").value = "1";
                else
                    document.getElementById("Hidden1").value = parseInt(document.getElementById("Hidden1").value) + 1;
            }
        }
    </script>
c#
    protected void Page_Load(object sender, EventArgs e)
    {
        Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "addline(" + Hidden1.Value + ",1)", true);
    }
至于表格中有个按钮处理道理是一样的

Answer 4

        Table table1 = new Table();
        TableRow r = new TableRow();
        TableCell c = new TableCell();        r.Cells.Add(c);
        table1.Rows.Add(r);

Answer 5

并在前台添加asp的table控件<asp:Table ID="Table1" runat="server" />

Answer 6

试了下，似乎Page.ClientScript.RegisterStartupScript没发挥作用？
function addRetValid(bValid)
        {
            var allInputs = document.getElementById("RetMsisdnTab").getElementsByTagName("input");
            alert(allInputs.length);
            for (var i = 0; i < allInputs.length; i++)
            {
                if (bValid)
                {
                    allInputs[i].ReadOnly = false;
                }
                else
                {
                    allInputs[i].ReadOnly = true;
                }
            }
        }<table id="RetMsisdnTab" cellpadding="0" cellspacing="1" border="0" width="320" bgcolor="#CCCC99">
                                    <tr class="input">
                                        <td class="style6"><asp:TextBox ID="RetMsisdnTextBox" runat="server"></asp:TextBox></td>
                                        <td><asp:TextBox ID="RetPercentTextBox" runat="server" Width="50px"></asp:TextBox>
                                            <asp:Label ID="PerLabel" runat="server" Text="%"></asp:Label></td>
                                        <td style="width:52px"><input type="button" value="添 加" class="btn" onClick="insRow()" /></td>
                                    </tr>
                                </table>
然后在PageLoad中添加下面这句（m_bAddRet=false）：
Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "addRetValid(" + m_bAddRet.ToString() + ")", true);试了下，刚进入页面的时候，那个按钮依然有效>_<

Answer 7

我不知道上面那段是用法出了问题还是js脚本有问题，但在页面加载时并没alert，怀疑没调用这个js函数……
P.S：这个JS函数我放在了body里了>_<

Answer 8

传递非数值参数应加单引号!
Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "addRetValid('" +  m_bAddRet + "')", true);js接受判断,由于是字符串了,所以
if (bValid)
应改为
if (bValid=="True")

Answer 9

调用的JS函数,应放在<head>之间

Answer 10

修改了下，发现依然没用……
function addRetValid(bValid)
        {
            var allInputs = document.getElementById("RetMsisdnTab").getElementsByTagName("input");
            alert(allInputs.length);
            for (var i = 0; i < allInputs.length; i++)
            {
                if (bValid == "true" && allInputs[i].type == "button")
                {
                    allInputs[i].ReadOnly = false;
                }
                else if (bValid == "false" && allInputs[i].type == "button")
                {
                    allInputs[i].ReadOnly = true;
                }
            }
        }

Answer 11

bool a=true;
传递为True
所以应为bValid == "True"

Answer 12

function addRetValid(bValid)
        {
            var allInputs = document.getElementById("RetMsisdnTab").getElementsByTagName("input");
            alert(allInputs.length + "," + bValid);
            for (var i = 0; i < allInputs.length; i++)
            {
                alert(allInputs[i].type);
                if (bValid == "True" && allInputs[i].type == "button")
                {
                    allInputs[i].Disabled = "";
                }
                else if (bValid == "False" && allInputs[i].type == "button")
                {
                    allInputs[i].Disabled = "disabled";
                    alert(allInputs[i].Disabled);
                }
            }
        }
显示出来的确是disabled，不过似乎依然无效……不理解其中的道理真成问题啊……

Answer 13

allInputs[i].Disabled
大写改成小写
allInputs[i].disabled

Answer 14

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>无标题页</title>  <script language="javascript" type="text/javascript">  //使用clone方式来生成一行，targetTable是需要添加行的table的ID，sourceTable是clone对象  //talbe的ID，即复制sourceTable的第一行插入到targetTable中，完成增加行的操作  function insertRow(targetTable,sourceTable)  {  var oTBODY = document.getElementById(targetTable).tBodies.item(0);  var oTBODYData = document.getElementById(sourceTable).tBodies.item(0);  var rowsCount = oTBODYData.rows.length;  for(var i=0;i<rowsCount;i++){  oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));  }  }      function deleteRow(Field,targetTable){  var findex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的  document.getElementById(targetTable).deleteRow(findex);  }      // 查询出将要删除的行所在的位置index  function getElementOrder(field){  var i = 0;  var order = 0;  var elements = document.getElementsByName(field.name);  for(i=0;i<elements.length;i++){  order++;  if(elements[i]==field){  break;  }  }  return order;  }  </script></head>
<body>
  <form id="form1" runat="server">
  <div>
  <table id="sourceTable" style="display: none;">
  <tr>
  <td>
  <input type="text" name="username">
  </td>
  <td>
  <input type="password" name="password">
  </td>
  <td>
  <input type="text" name="age">
  </td>
  <td>
  <input type="button" name="deleteButton" value="删除" onclick="deleteRow(this,'targetTable')">
  </td>
  </tr>
  </table>
  <table id="targetTable">
  <tr>
  <td>
  用户名
  </td>
  <td>
  密码
  </td>
  <td>
  年龄
  </td>
  <td>
  &nbsp;
  </td>
  </tr>
  <tfoot>
  <tr>
  <td colspan="4" align="right">
  <input type="button" value="增加行" onclick="insertRow('targetTable','sourceTable');">
  </td>
  </tr>
  </tfoot>
  </table>
  </div>
  </form>
</body>
</html>

Answer 15

奇怪了，在下拉框的事件中修改m_bAddRet的值，却依然传了个False进去……protected void Page_Load(object sender, EventArgs e)
    ｛
        Response.Write("<script language='javascript'>alert('PageLoad" + m_bAddRet.ToString() + "');</script>");
        Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "addRetValid(\"" + m_bAddRet.ToString() + "\")", true);
    }protected void TypeDropDownList_SelectedIndexChanged(object sender, EventArgs e)
    {
        //ReFillProgDropList(TypeDropDownList, ProgDropDownList);
        m_bAddRet = true;
        Response.Write("<script language='javascript'>alert('SelectChange" + m_bAddRet.ToString() + "');</script>");
        Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "addRetValid(\"" + m_bAddRet.ToString() + "\")", true);
    }
function addRetValid(bValid)
        {
            var allInputs = document.getElementById("RetMsisdnTab").getElementsByTagName("input");
            alert(bValid);
            for (var i = 0; i < allInputs.length; i++)
            {
                if (bValid == "True" && allInputs[i].type == "button")
                {
                    allInputs[i].disabled = "";
                }
                else if (bValid == "False" && allInputs[i].type == "button")
                {
                    allInputs[i].disabled = "disabled";
                }
            }
        }在下拉框更改后，alert的顺序是PageLoadFalse;SelectChangeTrue;False;
不理解为什么传给addRetValid的是False而不是True

Answer 16

随便折腾！有些人既不懂asp.net控件编程，也不懂抛开所有asp.net机制自己开发一套javascreipt框架，在中间状态混日子，我看能做什么应用程序框架出来？！

Answer 17

额……正因为不懂所以才需要上CSDN求大家帮忙……任何人不可能一开始就是一个大鸟，我想包括楼上的吧>_<……希望楼上的大虾能帮小弟指明下方向呵……

Answer 18

额……搞定了似乎，只是把下拉框中的语句改为
ClientScript.RegisterStartupScript(ClientScript.GetType(), "", "addRetValid(\"" + m_bAddRet.ToString() + "\")", true);
但还是不知道为什么>_<