我有一个文本框和一个加号按钮。当用户点击加号按钮时,将添加一个带有文本框和减号按钮的新行,并且文本区域有这样的下划线
[ 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>
我正在使用 asp.net 2008 CSS 2.1
答案 0 :(得分: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);
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
这是工作。
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());
});
For More访问: