一个ASPX页面,上面有个TABLE,我用JS写了动态添加、删除TABLE行的方法。那我动态添加的行中的文本框或者下拉框之类要怎么绑定数据库中的数据呢?是不是一定要用后台代码来动态添加WEB控件,不能用JS来添加HTML控件?
解决方案 »
- ObjectDataSource 未能找到带参数的非泛型方法
- 为何datagrid设置了字体却不管用?
- vs.net 2005新特性究竟新在哪里??????
- 如何取得客户端脚本里的方法的返回值?
- 三层结构网站,急求助:如何不同用户访问不同数据库?
- asp.net部署在windows2003server出现乱码
- 怎么把系统产生的RDLC报表与上传的附件文件整合到一起打印输出?
- asp.net中如何使用web方式提交用户名和密码去通过域的验证?
- 共享session 中machine.config的问题!(急!再线等待)
- 想问一个菜鸟问题,在asp.net中的table如何使它的边框变为虚线?
- 三目表达式嵌套的问题
- 求分享:文本框带小计算器,输入数字
<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)"有问题???
这一段后来我是用中间函数和加个匿名函数实现的,直接这么写一直搞不定。