Uncaught TypeError：无法读取null的‘rows’属性，附GridView代码求解决

核心问题拆解 #

这个错误主要来自两个场景：要么你的JavaScript代码执行时，GridView对应的HTML表格还没渲染到页面（或者根本没输出到客户端），导致document.getElementById返回null；要么你计算的行索引超出了表格的有效范围，导致table.rows[i]取不到值，后续访问cells属性报错。

分步解决方案 #

1. 先确认GridView在客户端真的存在 #

• 检查Visible属性：如果你的GridView设置了Visible="false"，服务器端不会把这个控件输出到HTML里，客户端自然找不到它。确认Visible="true"（默认就是true，除非你主动改了）。
• 验证ClientID是否正确：在浏览器右键查看页面源码，搜索和GridView相关的ID，看看生成的客户端ID是不是和你JS里<%= GridView1.ClientID %>输出的一致——比如在母版页里，ID可能会变成ContentPlaceHolder1_GridView1这种带命名容器的格式。

2. 让JS在DOM加载完成后再执行 #

如果你的JS代码放在页面头部，或者在GridView元素之前，会出现DOM还没渲染完就去获取表格的情况，肯定返回null。可以用这几种方式解决：

• 直接把JS代码挪到页面最底部（</body>标签之前）。
• 用window.onload包裹你的函数：

  window.onload = function() {
      function rowno(rowindex) {
          // 你的函数逻辑放在这里
      }
  };
  

• 用jQuery的话，就用$(document).ready()：

  $(document).ready(function() {
      function rowno(rowindex) {
          // 你的函数逻辑放在这里
      }
  });
  

3. 修正行索引逻辑并增加容错判断 #

GridView默认会渲染表头行（ShowHeader="true"），所以table.rows[0]是表头，数据行从rows[1]开始。你用i = parseInt(rowindex) + 1的逻辑是对的，但要先判断这个索引是否在有效范围内，同时给每一步加空值判断避免报错：

function rowno(rowindex) {
    var i, CellValue, Row, td;
    i = parseInt(rowindex) + 1;
    var table = document.getElementById('<%= GridView1.ClientID %>');
    
    // 先检查表格是否存在
    if (!table) {
        console.error("找不到GridView对应的表格元素");
        return;
    }
    
    // 检查索引是否在有效范围内
    if (i < 0 || i >= table.rows.length) {
        console.error(`行索引${i}超出范围，表格共有${table.rows.length}行`);
        return;
    }
    
    Row = table.rows[i];
    // 检查行是否存在且有足够单元格
    if (!Row || Row.cells.length < 2) {
        console.error("目标行不存在或单元格数量不足");
        return;
    }
    
    td = Row.cells[1];
    // 检查单元格子元素是否存在
    if (!td.children || td.children.length === 0) {
        console.error("目标单元格里没有子元素");
        return;
    }
    
    var targetElement = td.children[0];
    if (!targetElement.attributes || targetElement.attributes.length === 0) {
        console.error("目标子元素没有可读取的属性");
        return;
    }
    
    CellValue = targetElement.attributes[0].value;
    // 后续业务逻辑...
}

4. 处理UpdatePanel异步回发的特殊情况 #

如果你的GridView放在UpdatePanel里，异步回发后页面DOM会被重新渲染，原来的JS绑定会失效。这时候要在EndRequest事件里重新初始化逻辑：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    // 异步回发完成后，重新定义你的rowno函数或者绑定事件
});

内容的提问来源于stack exchange，提问作者ahmad ajlouni