使用JS动态添加table的行,这添加的行想要与数据绑定要怎么弄? 一个ASPX页面,上面有个TABLE,我用JS写了动态添加、删除TABLE行的方法。那我动态添加的行中的文本框或者下拉框之类要怎么绑定数据库中的数据呢?是不是一定要用后台代码来动态添加WEB控件,不能用JS来添加HTML控件? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 当你在动态添加之前,利用JS+AJAX读取库中信息,然后拼出你的动态行,然后在追加给TABLE 不知道异步的话就只能用用后台代码了,或者网上找一些异步的例子看下。会用JS写了动态添加、删除TABLE行的方法了,看异步那些也应该没什么困难的了 先用异步获取数据,再将数据绑定到html控件上就行了 <html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title></title> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //记录表格行数 var i = 0; //获取需要添加到文本的字符串 var str = '<%=strList %>'; $("#btnAdd").click(function() { //以表格行数作为id i = $("#tbDemo tr").length + 1; //先把指定html元素添加到表格 $("#tbDemo").append($("<tr><td><input id='inp" + i + "' type='text' /></td><td><select id='sel" + i + "'></select></td></tr>")); //分割字符 追加到对应的文本框或者select if (str.length > 0) { var strList = str.split("|"); //分类ID var catId = strList[0].split(",")[1]; $("#inp" + i).val(strList[0].split(",")[0]); var cateList = strList[1].split(","); //循环 添加到select for (var j = 0; j < cateList.length; j++) { var key = cateList[j].split("&"); //如果分类匹配 设置选中状态 if (key[1] == catId) { $("#sel" + i).append("<option value='" + key[1] + "' selected='selected'>" + key[0] + "</option>"); } else { $("#sel" + i).append("<option value='" + key[1] + "'>" + key[0] + "</option>"); } } } }); }); </script></head><body> <form id="form1" runat="server"> <div> <table id="tbDemo"> </table> <input type="button" id="btnAdd" value="追加tr、td" /> </div> </form></body></html>protected string strList = string.Empty; protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) return; //页面加载时候获取需要添加到table中的字符串,建议使用json或者ajax StringBuilder strBuilder = new StringBuilder(); //1代表分类ID strBuilder.Append("雪中飞,2|").Append("酒水食品&1,服装百货&2"); strList = strBuilder.ToString(); } 异步用js+ajax,取出数据后转成json,再循环拼接到table的行里去。 //显示详细信息function showInfo(actionId, type) { $.post("Sys_Ajax/Sys_EmployInfo.ashx", { "type": "select", "actionId": actionId, "type2": type }, function (data, status) { if (status == "success") { var employs = $.parseJSON(data); $("#EmoplyList").empty(); //清空列表 var head = "<tr class='topTrStyle'><td>姓名</td><td>编号</td><td>归属公司</td><td>直属部门</td><td>职位</td><td>角色</td><td>操作一</td><td>操作二</td></tr>"; $("#EmoplyList").append(head); //加载列表 for (var i = 0; i < employs.length; i++) { var tr = "<tr style='background-color: #E9F2F7; font-size: 10pt; height: 25px'>";// tr += "<td><a href='Employ_Edit.aspx?type=show&actionId=" + employs[i].Id + "&actionId2=" + actionId + "&type2=" + type + "&showTitle=查看用户信息'>" + employs[i].Name + "</a></td>"; tr += "<td><a id='aInfo[" + i + "]' href='javascript: void(0)' onclick='javascript: editEmploy(\"show\",\"" + employs[i].Id + "\",\"" + actionId + "\",\"" + type + "\",\"查看用户信息\");return false;'>" + employs[i].Name + "</a></td>"; tr += "<td>" + employs[i].Code + "</td>"; tr += "<td>" + employs[i].Corp + "</td>" tr += "<td>" + employs[i].Dept + "</td>"; tr += "<td>" + employs[i].Post + "</td>"; tr += "<td>" + employs[i].Role + "</td>"; tr += "<td><a id='aDel[" + i + "]' href='javascript: void(0)' onclick='javascript: del(" + employs[i].Id + ");return false;'>删除</a></td>"; tr += "<td><a id='aEdit[" + i + "]' href='javascript: void(0)' onclick='javascript: editEmploy(\"edit\",\"" + employs[i].Id + "\",\"" + actionId + "\",\"" + type + "\",\"编辑用户信息\");return false;'>编辑</a></td>"; tr += "</tr>"; $("#EmoplyList").append($(tr)); } //end for employs } //end if status }); //end post} //end showInfo这个是用jquery ajax异步加载的方法,可以参考下 jquery还没看过,我先用AJAX+JS 试试。 js添加的行就没有必要进行绑定了。你要么ajax绑定要么js添加行,ajax取数据填充 原来.net的有自己的ajax,难怪一直不行。 我这个页面打开是先从数据库提取初始值,用后台绑定,这样就导致了我的TABLE是服务器控件。这样我用JS就不能对TABLE插入删除行,是不是我页面初始化的时候绑定数据就不能通过后台绑定。 JS就不能对TABLE插入删除行?没有这样的限制啊,都是可以的。你要是想插入的行能够保存,你需要使用ajax等提交到后台的数据库中进行保存下来 table是服务器控件,编译后ID不是都变了,JS里面不能通过DOM来获取这个TABLE节点了,该怎么做? 这个弄了我几天了~》~ 哪位高人可以加个QQ, 我好好问下~~3Q document.getElementById("<%=GridView1.ClientID%>")就可以得到变化过的id了也可以外面放一个div id=div1然后document.getElementById("div1").getElementsByTagName("table")[0]得到啊 xmlhttp.open("GET", "GetProductData.aspx?category='" + category + "'", true);我在JS中用ajax传值的时候,由于category这个参数是中文的,目标页面获取到的是乱码。JS里面有没有可以url编码的函数方法之类?还是要自己敲一个? xmlhttp.open("GET", "GetProductData.aspx?category='" + category + "'", true);我在JS中有AJAX传值的时候,由于category这个参数是中文的,目标页面获取到的是乱码。JS里有什么URL编码的函数方法么?还是要自己手动敲一个。 xmlhttp.open("GET", "GetProductData.aspx?category=" + encodeURIComponent(category), true);注意去掉多余的单引号 JS动态添加删除的行,我怎么不能用DOM获取设置,好像获取到的都是初始的HTML页面。 我寫過一個Html的GridView的數據綁定的,還帶分頁,而且支持內存分頁 部分代码var table = $(document.createElement('table')); table.append('<col width="100px" />');var tr = $(document.createElement('tr'));//firstvar lable1 = $(document.createElement("lable"));lable1.html("姓名:");lable1.css("color","white");this._firstCell = $(document.createElement('td'));tr.append(this._firstCell);/*tr.append(this._secondCell);tr.append(this._thirdCell);tr.append(this._forthCell);tr.append(this._fiveCell);tr.append(this._sixCell);*/table.append(tr); <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditProduct.aspx.cs" Inherits="EditProduct" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script type="text/javascript"> //插入行 function insertRow() { var table = document.getElementById('List').getElementsByTagName('Table')[0]; var tr = table.insertRow(); var rowNumber = table.rows.length; var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var TextIDCell = tr.insertCell(); TextIDCell.innerHTML = xmlhttp.responseText; var TextIDCell = tr.insertCell(); TextIDCell.innerHTML = " "; var TextIDCell = tr.insertCell(); TextIDCell.innerHTML = "<input type=\"text\" />" var TextIDCell = tr.insertCell(); TextIDCell.innerHTML = "<input type=\"text\" />"; //删除按钮 var BtDeleteCell = tr.insertCell(); BtDeleteCell.innerHTML = " "; setButtonAction(); } } xmlhttp.open("GET", "GetProductData.aspx?rowNumber=" + rowNumber, true); xmlhttp.send(); } //删除指定行 function deleteRow(i) { var table = document.getElementById('List').getElementsByTagName('Table')[0]; table.deleteRow(i); setButtonAction(); } //设置行 function setButtonAction(){ var table = document.getElementById('List').getElementsByTagName('Table')[0]; var rowsCount=table.rows.length; for(var i=1;i<rowsCount;i++){ var row = table.rows[i]; var select = document.getElementById('List').getElementsByTagName('Select')[2 * i - 2] select.onChange = "categoryChange('"+i+"',this.value)" row.cells[4].innerHTML="<input name='BtDel' value='删除' class=\"Button1\" type='button' onclick=\"deleteRow('"+i+"')\"/>" } } //下拉改变事件 function categoryChange(rowNumber, category) { var table = document.getElementById('List').getElementsByTagName('Table')[0]; var row = table.rows[rowNumber]; var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { row.cells[1].innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "GetProductData.aspx?category=" + encodeURIComponent(category), true); xmlhttp.send(); } </script></head><body> <form id="form1" runat="server"> <div> <table id="Table1" runat="server" style="width: 100%; border-style: solid; border-width: 1px"> <tr style="background-color: green"> <td style="width: 60%"> <asp:Label ID="LabelProductName" runat="server" Text="型号:"></asp:Label> <asp:TextBox runat="server" ID="TextProductName" Width="400px"></asp:TextBox> </td> <td style="width: 40%"> <asp:Label ID="LabelProductId" runat="server" Text="料号:"></asp:Label> <asp:TextBox runat="server" ID="TextProductId"></asp:TextBox> </td> </tr> </table> <label runat="server" id="sbqd"> 设备清单:</label><input name="BtAdd" value="增加" class="Button1" type="button" onclick="insertRow()" /> <div id="List" style="height: 500px; overflow: scroll; border: 2px double black"> <table id="TableDeviceList" width="70%" border="1" runat="server"> <tr> <td> 类别 </td> <td> 料号 </td> <td> 数量 </td> <td> 工序 </td> <td> 删除 </td> </tr> </table> </div> <asp:Button runat="server" ID="BtnSave" Text="保存" OnClick="BtnSave_Click" /> </div> </form></body></html>代码贴出来先看看。。删除行的时候,比如原来有四行,我删除第二行,那原来的第三行就变成了第二行,可是这一行里的SELECT的onChange事件还是激发第三行。 我觉得是不是 function setButtonAction(){ var table = document.getElementById('List').getElementsByTagName('Table')[0]; var rowsCount=table.rows.length; for(var i=1;i<rowsCount;i++){ var row = table.rows[i]; var select = document.getElementById('List').getElementsByTagName('Select')[2 * i - 2] select.onChange = "categoryChange('"+i+"',this.value)" row.cells[4].innerHTML="<input name='BtDel' value='删除' class=\"Button1\" type='button' onclick=\"deleteRow('"+i+"')\"/>" } }这一段的 select.onChange = "categoryChange('"+i+"',this.value)"有问题??? 看来是getElementsByTagName 这个只能获得下一级子节点了。 本來想發個HtmlGridView的,但是js太長了 select.onChange = "categoryChange('"+i+"',this.value)"这一段后来我是用中间函数和加个匿名函数实现的,直接这么写一直搞不定。 关于抓取分页如何抓取 如何读取Excel表格中的内容 看到的帮忙看下 在线等 webservice中struct的问题 请问这个SQL操作该如何实现?? 如何获得客户端登陆用户的名称? 100分急求解决方法!在线等,马上结贴 asp.net 如何连接access数据库? 看看这个效果有什么好的方法可以实现 (高分求解)为什么在ASP中调用同一个DLL的不同模块会有问题?! 三目表达式嵌套的问题 求分享:文本框带小计算器,输入数字
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//记录表格行数
var i = 0; //获取需要添加到文本的字符串
var str = '<%=strList %>'; $("#btnAdd").click(function() {
//以表格行数作为id
i = $("#tbDemo tr").length + 1; //先把指定html元素添加到表格
$("#tbDemo").append($("<tr><td><input id='inp" + i + "' type='text' /></td><td><select id='sel" + i + "'></select></td></tr>")); //分割字符 追加到对应的文本框或者select
if (str.length > 0) {
var strList = str.split("|");
//分类ID
var catId = strList[0].split(",")[1];
$("#inp" + i).val(strList[0].split(",")[0]);
var cateList = strList[1].split(","); //循环 添加到select
for (var j = 0; j < cateList.length; j++) {
var key = cateList[j].split("&"); //如果分类匹配 设置选中状态
if (key[1] == catId) {
$("#sel" + i).append("<option value='" + key[1] + "' selected='selected'>" + key[0] + "</option>");
}
else {
$("#sel" + i).append("<option value='" + key[1] + "'>" + key[0] + "</option>");
}
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tbDemo">
</table>
<input type="button" id="btnAdd" value="追加tr、td" />
</div>
</form>
</body>
</html>protected string strList = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
return;
//页面加载时候获取需要添加到table中的字符串,建议使用json或者ajax
StringBuilder strBuilder = new StringBuilder();
//1代表分类ID
strBuilder.Append("雪中飞,2|").Append("酒水食品&1,服装百货&2");
strList = strBuilder.ToString();
}
//显示详细信息
function showInfo(actionId, type) {
$.post("Sys_Ajax/Sys_EmployInfo.ashx", { "type": "select", "actionId": actionId, "type2": type }, function (data, status) {
if (status == "success") {
var employs = $.parseJSON(data); $("#EmoplyList").empty(); //清空列表
var head = "<tr class='topTrStyle'><td>姓名</td><td>编号</td><td>归属公司</td><td>直属部门</td><td>职位</td><td>角色</td><td>操作一</td><td>操作二</td></tr>";
$("#EmoplyList").append(head);
//加载列表
for (var i = 0; i < employs.length; i++) {
var tr = "<tr style='background-color: #E9F2F7; font-size: 10pt; height: 25px'>";
// tr += "<td><a href='Employ_Edit.aspx?type=show&actionId=" + employs[i].Id + "&actionId2=" + actionId + "&type2=" + type + "&showTitle=查看用户信息'>" + employs[i].Name + "</a></td>";
tr += "<td><a id='aInfo[" + i + "]' href='javascript: void(0)' onclick='javascript: editEmploy(\"show\",\"" + employs[i].Id + "\",\"" + actionId + "\",\"" + type + "\",\"查看用户信息\");return false;'>" + employs[i].Name + "</a></td>";
tr += "<td>" + employs[i].Code + "</td>";
tr += "<td>" + employs[i].Corp + "</td>"
tr += "<td>" + employs[i].Dept + "</td>";
tr += "<td>" + employs[i].Post + "</td>";
tr += "<td>" + employs[i].Role + "</td>";
tr += "<td><a id='aDel[" + i + "]' href='javascript: void(0)' onclick='javascript: del(" + employs[i].Id + ");return false;'>删除</a></td>";
tr += "<td><a id='aEdit[" + i + "]' href='javascript: void(0)' onclick='javascript: editEmploy(\"edit\",\"" + employs[i].Id + "\",\"" + actionId + "\",\"" + type + "\",\"编辑用户信息\");return false;'>编辑</a></td>";
tr += "</tr>"; $("#EmoplyList").append($(tr));
} //end for employs
} //end if status
}); //end post
} //end showInfo
这个是用jquery ajax异步加载的方法,可以参考下
你要么ajax绑定
要么js添加行,ajax取数据填充
这样我用JS就不能对TABLE插入删除行,是不是我页面初始化的时候绑定数据就不能通过后台绑定。
没有这样的限制啊,都是可以的。
你要是想插入的行能够保存,你需要使用ajax等提交到后台的数据库中进行保存下来
然后
document.getElementById("div1").getElementsByTagName("table")[0]
得到啊
JS里面有没有可以url编码的函数方法之类?还是要自己敲一个?
我在JS中有AJAX传值的时候,由于category这个参数是中文的,目标页面获取到的是乱码。
JS里有什么URL编码的函数方法么?还是要自己手动敲一个。
table.append('<col width="100px" />');
var tr = $(document.createElement('tr'));
//first
var lable1 = $(document.createElement("lable"));
lable1.html("姓名:");
lable1.css("color","white");
this._firstCell = $(document.createElement('td'));
tr.append(this._firstCell);
/*
tr.append(this._secondCell);
tr.append(this._thirdCell);
tr.append(this._forthCell);
tr.append(this._fiveCell);
tr.append(this._sixCell);
*/
table.append(tr);
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
//插入行
function insertRow() {
var table = document.getElementById('List').getElementsByTagName('Table')[0];
var tr = table.insertRow();
var rowNumber = table.rows.length;
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var TextIDCell = tr.insertCell();
TextIDCell.innerHTML = xmlhttp.responseText;
var TextIDCell = tr.insertCell();
TextIDCell.innerHTML = " ";
var TextIDCell = tr.insertCell();
TextIDCell.innerHTML = "<input type=\"text\" />"
var TextIDCell = tr.insertCell();
TextIDCell.innerHTML = "<input type=\"text\" />";
//删除按钮
var BtDeleteCell = tr.insertCell();
BtDeleteCell.innerHTML = " ";
setButtonAction();
}
}
xmlhttp.open("GET", "GetProductData.aspx?rowNumber=" + rowNumber, true);
xmlhttp.send();
} //删除指定行
function deleteRow(i) {
var table = document.getElementById('List').getElementsByTagName('Table')[0];
table.deleteRow(i);
setButtonAction();
} //设置行
function setButtonAction(){
var table = document.getElementById('List').getElementsByTagName('Table')[0];
var rowsCount=table.rows.length;
for(var i=1;i<rowsCount;i++){
var row = table.rows[i];
var select = document.getElementById('List').getElementsByTagName('Select')[2 * i - 2]
select.onChange = "categoryChange('"+i+"',this.value)"
row.cells[4].innerHTML="<input name='BtDel' value='删除' class=\"Button1\" type='button' onclick=\"deleteRow('"+i+"')\"/>"
}
} //下拉改变事件
function categoryChange(rowNumber, category) {
var table = document.getElementById('List').getElementsByTagName('Table')[0];
var row = table.rows[rowNumber];
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
row.cells[1].innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "GetProductData.aspx?category=" + encodeURIComponent(category), true);
xmlhttp.send();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="Table1" runat="server" style="width: 100%; border-style: solid; border-width: 1px">
<tr style="background-color: green">
<td style="width: 60%">
<asp:Label ID="LabelProductName" runat="server" Text="型号:"></asp:Label>
<asp:TextBox runat="server" ID="TextProductName" Width="400px"></asp:TextBox>
</td>
<td style="width: 40%">
<asp:Label ID="LabelProductId" runat="server" Text="料号:"></asp:Label>
<asp:TextBox runat="server" ID="TextProductId"></asp:TextBox>
</td>
</tr>
</table>
<label runat="server" id="sbqd">
设备清单:</label><input name="BtAdd" value="增加" class="Button1" type="button" onclick="insertRow()" />
<div id="List" style="height: 500px; overflow: scroll; border: 2px double black">
<table id="TableDeviceList" width="70%" border="1" runat="server">
<tr>
<td>
类别
</td>
<td>
料号
</td>
<td>
数量
</td>
<td>
工序
</td>
<td>
删除
</td>
</tr>
</table>
</div>
<asp:Button runat="server" ID="BtnSave" Text="保存" OnClick="BtnSave_Click" />
</div>
</form>
</body>
</html>代码贴出来先看看。。
删除行的时候,比如原来有四行,我删除第二行,那原来的第三行就变成了第二行,可是这一行里的SELECT的onChange事件还是激发第三行。
var table = document.getElementById('List').getElementsByTagName('Table')[0];
var rowsCount=table.rows.length;
for(var i=1;i<rowsCount;i++){
var row = table.rows[i];
var select = document.getElementById('List').getElementsByTagName('Select')[2 * i - 2]
select.onChange = "categoryChange('"+i+"',this.value)"
row.cells[4].innerHTML="<input name='BtDel' value='删除' class=\"Button1\" type='button' onclick=\"deleteRow('"+i+"')\"/>"
}
}
这一段的 select.onChange = "categoryChange('"+i+"',this.value)"有问题???
这一段后来我是用中间函数和加个匿名函数实现的,直接这么写一直搞不定。