在js中取得gridView某行某列的值_js 循环 gridview-CSDN博客

本文链接：https://blog.csdn.net/pengshumin89/article/details/6637396

本文介绍如何在JavaScript中从GridView控件中获取特定行和列的值，涉及使用dataset、input元素、函数处理及字符串操作。适用于前端与服务器交互的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gridViewSelectAll.aspx.cs"
    Inherits="bindData.gridViewSelectAll" %>

<!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 language="javascript" type="text/javascript">
        //全选
        function checkAll() {
            var checkBox = document.getElementsByTagName("input");
            for (var i = 0; i < checkBox.length; i++) {
                if (checkBox[i].type == "checkbox") {
                    checkBox[i].checked = document.all.cb_title.checked;
                }
            }
        }

        //修改
        function editRow() {
            var checkCount = 0;
            var id = "";
            var gridView = document.getElementById("gridView_dataSet");
            var checkBox = document.getElementsByName("checkBox"); //取得gridView中所有的checkBox
            for (var i = 0; i < checkBox.length; i++) {
                if (checkBox[i].type == "checkbox") {
                    if (checkBox[i].checked == true) {
                        id = gridView.rows[i + 1].cells[1].innerHTML; //取得gridView中某行的id
                        checkCount++;
                    }
                }
            }
            if (checkCount != 1) {
                alert("请选择一项进行修改！");
            } else {
                alert("id=" + id);
            }
        }

        function editRow1() {
            var id = "";
            var count = 0;
            var gridView = document.getElementById("gridView_dataSet");
            for (i = 1; i < gridView.rows.length; i++) {
                var cb = gridView.rows(i).cells(0).children(0);
                if (cb.checked) {
                    count++;
                    id = gridView.rows(i).cells(1).innerText;
                }
            }
            if (count != 1) {
                alert("请选择一项进行修改！");
            } else {
                alert("id=" + id);
            }
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="选择一项" οnclick="editRow();" />
        <input type="button" id="btn_edit" value="修改" οnclick="editRow1();" />
        <asp:GridView ID="gridView_dataSet" runat="server">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <input type="checkbox" id="cb_title" οnclick="checkAll();">
                    </HeaderTemplate>
                    <ItemTemplate>
                        <input type="checkbox" id="cb_item" name="checkBox" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

后台：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace bindData
{
    public partial class gridViewSelectAll : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                bindData();
            }
        }

        /// <summary>
        /// 设置数据
        /// </summary>
        /// <returns></returns>
        private DataSet setData()
        {
            DataSet ds = new DataSet();//注：必须要new，否则会是未将对象设置到实例

            DataTable dt = new DataTable();//设置表

            DataColumn dc = null;//设置列
            dc = dt.Columns.Add("id", typeof(string));
            dc = dt.Columns.Add("goodsName", typeof(string));
            dc = dt.Columns.Add("price", typeof(string));
            dc = dt.Columns.Add("number", typeof(int));
            dc = dt.Columns.Add("buyTime", typeof(DateTime));
            dc = dt.Columns.Add("fresh", typeof(int));

            DataRow dr = null;//设置行
            dr = dt.Rows.Add("1", "a", 1.3, 1, "2005-10-2", 1);
            dr = dt.Rows.Add("tt", "b", 0.5, 2, "2005-10-2", 0);
            dr = dt.Rows.Add("3", "c", 1.5, 3, "2005-10-2", 1);
            dr = dt.Rows.Add("4", "d", 0.2, 4, "2005-10-2", 0);
            dr = dt.Rows.Add("5", "e", 0.2, 5, "2005-10-2", 0);
            dr = dt.Rows.Add("6", "f", 1.6, 6, "2005-10-2", 1);
            dr = dt.Rows.Add("g", "g", 0.3, 7, "2005-10-2", 0);
            dr = dt.Rows.Add("7", "g", 0.3, 7, "2005-10-2", 0);
            dr = dt.Rows.Add("g", "g", 0.3, 7, "2005-10-2", 0);
            dr = dt.Rows.Add("t", "g", 0.3, 7, "2005-10-2", 0);

            ds.Tables.Add(dt);

            return ds;
        }


        /// <summary>
        /// 绑定数据源
        /// </summary>
        private void bindData()
        {
            gridView_dataSet.DataSource = setData();
            gridView_dataSet.DataBind();
        }
    }
}