javascript - 在javascript中添加动态控件

Question

我有一个文本框和一个加号按钮。当用户点击加号按钮时，一个新行将添加文本框和减号按钮，文本区域有这样的下划线

[ text                         ] +

text                             -
--------------------------------

所以我尝试了这样的事情:

function AddNote() {
  var xtbl = document.getElementById("tblMain");
  var xrowcount = xtbl.rows.length;
  var xrow = xtbl.insertRow(xrowcount);
  var xcell0 =xrow.insertCell(0);
  var xcell1 = xrow.insertCell(1);
  var xcell2 = xrow.insertCell(2);
  var newlabel = document.createElement("Label");
  newlabel.id = "id" + xrowcount
  newlabel.innerHTML = document.getElementById("txtReleaseNote").value;
  xcell1.appendChild(newlabel);
  var newlabel1 = document.createElement("Label");
  newlabel1.id = "lblminus" + xrowcount
  newlabel1.innerHTML="<h2>-</h2>"
  xcell1.setAttribute("colspan", 2);
  xcell1.setAttribute("borderBottom", "1px solid #0000FF");
  xcell2.appendChild(newlabel1);

}

<table id="tblMain" align="center" width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed; text-align: left; margin-top:10px;">
  <colgroup>
    <col style="width: 50px;">
    <col style="width: 145px;">
    <col style="width: 350px;">
    <col style="width: 100px;">
    <col style="width: auto;">
    <!-- Use "width: auto;" to apply the remaining (unused) space -->
    <col style="width: 50px">
  </colgroup>
  <tbody>
    <tr><td></td><td>Release Notes</td><td><asp:TextBox
                                                        id="txtReleaseNote" TextMode="MultiLine" Rows="3" runat="server" MaxLength="15" 
                                                        Width= "100%" CssClass="TextBoxBorder"></asp:TextBox></td>
      <td style="padding-left:15px; Color:RGB(33,88,103);"> <h2 id="lblplus" 
                                                                onclick="AddNote()" style="cursor: pointer; vertical-align:text-top;" > + </h2> </td> </tr>
  </tbody>
</table>

1. 减号按钮垂直方向不等于加号。我做错了什么？
2. 如何为减号指定颜色？

我正在使用 asp.net 2008 CSS 2.1

Answer 1

这个答案解释了如何修复 UI。

这里 Unresolved 问题是如何将它保存到服务器，因为您使用的是 ASP.NET 并且该框架默认情况下不支持动态输入。您可以在这里阅读答案 http://forums.asp.net/t/1611284.aspx?How+to+get+value+from+dynamically+added+html+input+

function AddNote() {
  var xtbl = document.getElementById("tblMain");
  var xrowcount = xtbl.rows.length;
  var xrow = xtbl.insertRow(xrowcount);

  var xcell0 =xrow.insertCell(0);
  var newlabel = document.createElement("Label");
  newlabel.id = "id" + xrowcount
  newlabel.innerHTML = document.getElementById("txtReleaseNote").value;


  var xcell1 = xrow.insertCell(1);
  xcell1.setAttribute("colspan", 2);
  xcell1.setAttribute("style", "border-bottom:1px solid #0000FF");
  xcell1.appendChild(newlabel);

  var xcell2 = xrow.insertCell(2);
  xcell2.setAttribute('style', 'padding-left:15px; color:RGB(33,88,103);');
  var newlabel1 = document.createElement("label");
  newlabel1.id = "lblminus" + xrowcount
  newlabel1.innerHTML="<h2 style='cursor:pointer;margin:0;' onclick='removeRow(this)'>-</h2>"
  xcell2.appendChild(newlabel1);
}

function removeRow(elm) {
  var row = elm.parentNode.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

<table id="tblMain" align="center" width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed; text-align: left; margin-top:10px;">
  <colgroup>
    <col style="width: 50px;">
    <col style="width: 145px;">
    <col style="width: 350px;">
    <col style="width: 100px;">
    <col style="width: auto;">
    <!-- Use "width: auto;" to apply the remaining (unused) space -->
    <col style="width: 50px">
  </colgroup>
  <tbody>
    <tr>
      <td></td>
      <td>Release Notes</td>
      <td>
        <textarea id="txtReleaseNote" rows="3" class="TextBoxBorder"></textarea>
        <!-- <asp:TextBox id="txtReleaseNote" TextMode="MultiLine" Rows="3" runat="server" MaxLength="15" Width= "100%" CssClass="TextBoxBorder"></asp:TextBox>-->
      </td>
      <td style="padding-left:15px; color:RGB(33,88,103);">
        <h2 id="lblplus" onclick="AddNote()" style="cursor: pointer; vertical-align:text-top;" > + </h2>
      </td>
    </tr>
  </tbody>
</table>