使用javascript或jquery向网格视图添加新行 [英] adding a new row to a grid view using javascript or jquery
问题描述
您好我正在尝试使用javascript或jquery向GridView添加新行。我没有使用代码背后的代码，因为我不希望页面刷新，所以我尝试在JavaScript中。我尝试了下面的代码，它确实添加了一个新行...但是新行是第一行的克隆或副本...我不想要...意味着当我点击添加时我需要同样的行新行，但网格视图中该行的ID应该是不同的，这不会发生，因为我正在做克隆...并且使用的代码是..：
Hi i am trying to add a new row to the GridView using javascript or jquery. I am not using code behind code as i do not want the page to get refreshed so i am trying in javascript. I have tried the following code and it did add a new row.. but the new row is a clone or copy of first row... wich i do not want... means i need same kind of row when i click on add new row but the id of that row inside grid view should be different which is not happening as i am doing clone... and code is used was.. :
function AddNewRecord()
{
var grd = document.getElementById('ctl00_ContentPlaceHolder1_griddetails');
var tbod=grd.rows[0].parentNode;
var newRow=grd.rows[grd.rows.length - 1].cloneNode(true);
tbod.appendChild(newRow);
}
按钮点击我正在调用这个js函数，但由于它有克隆节点，它只是复制相同的id在gridview的下一行，我不需要...所以你可以帮助我，我怎么能修改这个代码来创建新的行，其中包含第一个细节但是有新的id ...
提前感谢你！
on the button click i am calling this js function but since it has clone node it is just copying same id to next row in gridview which i do not need... so can u please help me as to how can i modify this code to create new row with details as of first but with new id...
Thanking u in advance!
推荐答案
客户端没有网格视图，只有一张桌子。因此，创建一个新的tr / td /任意HTML字符串并将其附加到表中。
There is no grid view on the client side, only a table. So create a new tr/td/whatever string of HTML and append it to the table.
<!-- There is no grid view on the client side, only a table. So create a new tr/td/whatever string of HTML and append it to the table. try this... -->
<html>
<head>
<script type="text/javascript">
function addRow()
{
var tr = document.createElement("tr");
for(var c = 0; c < tbl.rows[0].childNodes.length; c++)
{
var td = document.createElement("td");
td.innerText = "Column " + c;
tr.appendChild(td);
tr.style.backgroundColor = "lightgrey";
td.onmouseover = function()
{
this.style.backgroundColor = "lightyellow";
}
td.onmouseout = function()
{
this.style.backgroundColor = "lightgrey";
}
td.onclick = function()
{
alert(this.innerText);
}
}
tbl.children[0].appendChild(tr);
}
</script>
</head>
<body>
<table id="tbl" width="60%" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
<br/><br/>
<input type="button" onclick="addRow();" value="Add Row" />
</body>
</html>
这篇关于使用javascript或jquery向网格视图添加新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
