在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。

这里的未解决问题是如何将其保存到服务器，因为您使用的是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>

Answer 2

成功了。

HTML代码：

<table>
    <thead>
        <tr>
            <th>
                Text
            </th>
            <th>  <button type="button" data-bind="click: addNewRow"  >
                  +
                </button>
            </th>
        </tr>
    </thead>
    <tbody data-bind="template:{name:'tableRow', foreach: tableRows}">
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">

            </td>
        </tr>
    </tfoot>
</table>
<script id="tableRow" type="text/html">
    <tr>
        <td>
            <input type="text" style="width:40px;" data-bind="value: number, valueUpdate: 'keyup'" />
        </td>
        <td>
            <button type="button" data-bind="click: function(){ $data.remove(); }">
                -
            </button>
        </td>
    </tr>
</script>

knockout.js

function tableRow(number, ownerViewModel) {
    this.number = ko.observable(number);
    this.remove = function() {
        ownerViewModel.tableRows.destroy(this);
    }
}

function tableRowsViewModel() {
    var that = this;
    this.tableRows = ko.observableArray([]);
    this.addNewRow = function() {
        this.tableRows.push(new tableRow('', that));
    }
    this.addNewRow();

    //dependentObservable to represent the last row's value
    this.lastRowValue = ko.dependentObservable(function() {
       var rows = that.tableRows();
       return rows.length ? rows[rows.length - 1].number() : null; 
    });

    //subscribe to changes to the last row
    this.lastRowValue.subscribe(function(newValue) {
        if (newValue) {
           that.tableRows.push(new tableRow('', that));
        }
    });
}



$(document).ready(function() {
    ko.applyBindings(new tableRowsViewModel());
});

更多请访问：

http://jsfiddle.net/rniemeyer/f5f8s/