如何用JS将Datagrid某一列设定为超级链接列?

sanduVB 2009-12-25 01:21:39

Datagrid是ASP.net自带的WEB控件.
1.在客户端如何用JS为datagrid某一列设定为超级链接列?
2.在客户端如何用JS为datagrid某一列设定为按钮列,并添加删除事件?

...全文

160 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

阿非 2009-12-25

打赏
举报

table.children[0].removeChild(tr);

tr 是tbody 的子元素不是table 的

menglingjun 2009-12-25

打赏
举报

Sandy945 给的这个脚本不好用么。。。理论上应该好用。。

function del(obj) {
var table = document.getElementById('<%=dg.ClientID %>');
table.children[0].removeChild(obj.parentElement.parentElement);
}

lhz_dxm 2009-12-25

打赏
举报

可以用ajax,
获取每行的名称或id,根据id来找到相应的行，进行操作

sanduVB 2009-12-25

打赏
举报

Sandy945,sq_zhuyi.点按钮后,删除那行的语句应如何写?用以下语句没效.

var table = document.getElementById("talbe");
var tr= btn.parentNode.parentNode;//按钮的parentNode是td，td的parentNode是tr
table.removeChild(tr); //从table移除这行tr

以上的语句应怎么改?现在用此无效.

阿非 2009-12-25

打赏
举报





<!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>        

        function addA() {

            var table = document.getElementById('<%=dg.ClientID %>');

            var len = table.rows.length;

            for (var i = 1; i < len; i++) {

                table.rows[i].cells[0].innerHTML = '<a href="www.csdn.net">' + table.rows[i].cells[0].innerHTML + '</a>';

            }

        }

        function del(obj) {

            var table = document.getElementById('<%=dg.ClientID %>');

            table.children[0].removeChild(obj.parentElement.parentElement);

        }

        function addInput() {

            var table = document.getElementById('<%=dg.ClientID %>');

            var len = table.rows.length;

            for (var i = 1; i < len; i++) {

                table.rows[i].cells[1].innerHTML = '<input type="button" value="' + table.rows[i].cells[1].innerText + '" onclick="del(this);" />';

            }

        } 

    </script>



</head>

<body>

    <form id="form1" runat="server">

    <asp:DataGrid ID='dg' runat="server">

    </asp:DataGrid>

    <input type='button' value='add <A> for column 1' onclick='addA();' />

    <input type='button' value='add <input type="button"> for column 2' onclick='addInput();this.disabled=true;' />    

    </form>

</body>

</html>



 private DataTable GetDT()

    {

        DataTable dt = new DataTable();

        dt.Columns.Add(new DataColumn("ID", typeof(Int32)));

        dt.Columns.Add(new DataColumn("Name", typeof(String)));

        DataRow dr = dt.NewRow();

        dr[0] = 1;

        dr[1] = "A";

        dt.Rows.Add(dr);

        dr = dt.NewRow();

        dr[0] = 2;

        dr[1] = "B";

        dt.Rows.Add(dr);

        dr = dt.NewRow();

        dr[0] = 3;

        dr[1] = "C";

        dt.Rows.Add(dr);

        dr = dt.NewRow();

        dr[0] = 4;

        dr[1] = "D";

        dt.Rows.Add(dr);

        dr = dt.NewRow();

        dr[0] = 5;

        dr[1] = "E";

        dt.Rows.Add(dr);

        dr = dt.NewRow();

        dr[0] = 6;

        dr[1] = "F";

        dt.Rows.Add(dr);

        return dt;

    }



    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            dg.DataSource = GetDT();

            dg.DataBind();

        }

    }

路人乙e 2009-12-25

打赏
举报

绑定datagrid的代码：
DataTable dt = new DataTable();
dt.Columns.Add("name");
dt.Columns.Add("age");
DataRow row = dt.NewRow();
row[0] = "aaa";
row[1] = "18";
dt.Rows.Add(row);
row = dt.NewRow();
row[0] = "bbb";
row[1] = "20";
dt.Rows.Add(row);

datagrid1.DataSource = dt;
datagrid1.DataBind();

路人乙e 2009-12-25

打赏
举报

[Quote=引用 1 楼 sandy945 的回复:]
当然 js 可以实现以上功能。

但你直接使用模板列不是更好
[/Quote]
支持sandy945的观点，顺便给出代码

<div><asp:DataGrid ID="datagrid1" runat="server"></asp:DataGrid></div>
<script type="text/javascript">
var trs = document.getElementById("datagrid1").getElementsByTagName("tr");
var tds;
for(var i=1;i<trs.length;i++){
tds = trs[i].getElementsByTagName("td");
tds[0].innerHTML = "<a href='#'>"+tds[0].innerHTML+"</a>";
tds[1].innerHTML = "<input type='button' value='"+tds[1].innerHTML+"' onclick='clickBtn(this)' />";
}
function clickBtn(btn){
alert("you clicked the button <"+btn.value+">");
}
</script>

sanduVB 2009-12-25

打赏
举报

还有没有高手再指点一下.

sanduVB 2009-12-25

打赏
举报

谢谢楼上两位.
Datagrid是ASP.net自带的WEB表格控件,System.Web.UI.WebControls.DataGrid
所以上面的代码匹配不了.
例如:table.rows[i].cells[0].innerHTML='<a href="www.csdn.net">'+table.rows[i].cells[0].innerHTML.这句话,用JS在这个控件上就不生效.应如何写?

menglingjun 2009-12-25

打赏
举报

奉上删除按钮的脚本。。给你的table加个id
function delLine(btn)
{
var table = document.getElementById("talbe");
var tr= btn.parentNode.parentNode;//按钮的parentNode是td，td的parentNode是tr
table.removeChild(tr); //从table移除这行tr
}

阿非 2009-12-25

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

<script>

function addA()

{

    var table=document.getElementById('table');

	var len=table.rows.length;

	for(var i=0;i<len;i++)

	{

	     table.rows[i].cells[0].innerHTML='<a href="www.csdn.net">'+table.rows[i].cells[0].innerHTML+'</a>';

	}

}

function addInput()

{

    var table=document.getElementById('table');

	var len=table.rows.length;

	for(var i=0;i<len;i++)

	{

	     table.rows[i].cells[1].innerHTML='<input type="button" value="'+table.rows[i].cells[1].innerText+'" onclick="__dopost(\'\',\'\')" />';

	}

}

</script>



 </HEAD>



 <BODY>

  <table id='table'>

  <tr>

    <td>

	    1

	    </td>

    <td>

	    小明

	    </td>

	<td>

	    男

	    </td>

    </tr>

	<tr>

    <td>

	    2

	    </td>

    <td>

	    小红

	    </td>

	<td>

	    女

	    </td>

    </tr>

	<tr>

    <td>

	    3

	    </td>

    <td>

	    小强

	    </td>

	<td>

	    无

	    </td>

    </tr>

  </table>

  <input type='button' value='add <A> for column 1' onclick='addA();' />

    <input type='button' value='add <input type="button"> for column 2' onclick='addInput();' />

 </BODY>

</HTML>