单击选中GridView 或 HTML 表格的某行，并获取该行的数据。。。。

使用JavaScript绑定GridView行单击事件实现选中行样式变化

最新推荐文章于 2022-09-29 09:58:04 发布

原创最新推荐文章于 2022-09-29 09:58:04 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #jquery #function #object

Js/Jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在ASP.NET Web Forms中使用JavaScript为GridView控件绑定行单击事件，实现当某一行被点击时，该行的样式发生变化。具体步骤包括事件绑定、选中行样式设置以及对选中行数据的处理。

首先绑定行单击事件，如下：也可以用Jquery的.click进行事件绑定

 protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e){
        if (e.Row.RowType == DataControlRowType.DataRow){
            
            e.Row.Attributes.Add("onClick", "javascript:void SelectRow(this);");
        }
    }

然后再前台页面head部分写如下函数：

<script type="text/javascript">
         // 对选中行的处理函数
         function SelectRow(row) {
             var _selectColor = "#303030";
             var _normalColor = "#909090";
             var _selectFontSize = "3em";
             var _normalFontSize = "2em";
             // 获取当前行的所有数据单元
             var _rows = row.parentNode.childNodes;
             // 获取数据
             try {
                 for (i = 0; i < _rows.length; i++) {
                     var _firstCell = _rows[i].getElementsByTagName("td")[0];
                     _firstCell.style.color = _normalColor;
                     _firstCell.style.fontSize = _normalFontSize;
                     _firstCell.style.fontWeight = "normal";
                 }
             }
             catch (e) { }
             // 对该行的第一个单元格设样式
             var _selectedRowFirstCell = row.getElementsByTagName("td")[0];
             _selectedRowFirstCell.style.color = _selectColor;
             _selectedRowFirstCell.style.fontSize = _selectFontSize;
             _selectedRowFirstCell.style.fontWeight = "bold";
         }
</script>