`

Table的两个属性rowIndex与cellIndex

 
阅读更多

rowIndex用于判断当前单元格所处行的索引(从0开始)
cellIndex用于判断当前单元格所处列的索引(从0开始)

通常我们可以把他们的事件写在TD里,因为rowIndex属性应该是属于<tr>标记,因此在判断rowIndex需要访问父节点,示例如下:

 

<table align="center" width="100%" height="400" cellspacing="1" border="1" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#C0C0C0" bgcolor="#C0C0C0">
  <tr>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
  </tr>
  <tr>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
  </tr>
  <tr>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
  </tr>
</table>

 

分享到:
评论

相关推荐

    javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] <font color=red>原创</font>

    在JavaScript中,table中的每个单元格(td或th元素)都具有rowIndex属性和cellIndex属性。rowIndex返回的是单元格所在的行号(基于0的索引),cellIndex返回的是该单元格在其父行(tr元素)中的列号(同样基于0的...

    javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创

    因此,为了确保代码在所有浏览器中都能正常工作,我们需要统一这两个属性。下面是一种实现方式: ```javascript function getTarget(event) { return event.target || event.srcElement; } // 使用示例 document....

    IE和火狐下获取单元格内容的共通方法

    var cellContent = table.rows[rowIndex].cells[cellIndex].innerText; ``` `innerText`属性用于获取元素的文本内容。 2. **Firefox浏览器:** Firefox遵循W3C标准,所以我们需要使用`document....

    elementUI给table表头行设置背景颜色样式.pdf

    它接收两个参数:`rowIndex`表示当前行的索引,`columnIndex`表示当前列的索引。根据这些信息,我们可以决定如何应用样式。 通常,我们只关心表头(第一行),所以可以检查`rowIndex`是否为0,如果是,则返回包含...

    table的td整列拖动交换以及重新排列位置

    在`mousedown`事件中,记录下被拖动单元格的原始位置,包括行索引(rowIndex)和列索引(cellIndex)。同时,获取单元格的大小和坐标,以便在后续的`mousemove`事件中进行计算。 3. **计算新位置**: 在`...

    JS操作table大全

    比如,将第一行的两个单元格合并: ```javascript myTable.rows[0].cells[0].colSpan = 2; ``` **拆分单元格**:拆分单元格需要创建新的行和单元格,并复制原有数据。例如,将一个单元格拆分为两个: ```...

    vue 中 elment-ui table合并上下两行相同数据单元格

    它遍历数据源`tableData`,并为第一列(项目名称)和第二列(污染区段)分别创建两个数组`spanOneArr`和`spanTwoArr`。当遇到连续相同的项目名称或污染区段时,相应的数组元素会递增,表示需要合并的行数。 `...

    javascript 操作 Table 排序

    对于表格数据,我们需要创建一个函数来比较两个单元格的值: ```javascript function compareValues(a, b) { if (isNaN(a) && isNaN(b)) return a.localeCompare(b); // 对非数字字符串进行比较 else return ...

    element 合并表格头部

    要实现“合并表格头部”的功能,我们需要利用`table-column`组件的`type`属性和`span-method`属性。`type`属性可以设置为`index`、`selection`或`expand`,但我们在这里关注的是`span-method`。`span-method`是一个...

    .net导出word,word表格打印,设置word单元格两种颜色,.net导出报表word版,.net word操作

    Word.Shape shape = table.Cell(rowIndex, columnIndex).Range.InlineShapes.AddShape(MsoShapeType.msoShapeRectangle, 0, 0, cellWidth, cellHeight); shape.Fill.Solid(); shape.Fill.ForeColor.RGB = Color....

    Jquery操作 table

    function hideCell(tableId, cellIndex) { var dgTable = document.getElementById(tableId); for (var i = 0; i ; i++) { if ($(dgTable.rows[i].cells[cellIndex]) != null) { $(dgTable.rows[i].cells[cell...

    javascript_动态创建表格

    row.deleteCell(cell.cellIndex); // 删除该单元格 ``` #### 三、设置表格属性 除了增删行和单元格外,还需要能够更改表格的其他属性,例如边框宽度等。 - **`setAttribute()`** 方法:此方法用于设置元素的...

    Table相关整理及Javascript操作table,tr,td

    此外,在表格的样式设置中,还有`cellSpacing`和`cellPadding`,这两个属性分别用来设置表格单元格之间的间隔和单元格内容与边框之间的间隔,设置为0可以使表格看起来更紧凑。 对于文本的截断处理,CSS提供了一种...

    POI读写excel(.xls/.xlsx)的Demo

    Apache POI 提供了 HSSF(Horrible Spreadsheet Format)和 XSSF(XML Spreadsheet Format)两个主要的API,分别用于处理老版的 .xls 文件和新版的 .xlsx 文件。HSSF 封装了微软Excel 97-2003的二进制文件格式,而 ...

    OpenXml读写Excel实例代码

    cellIndex &lt; row.Descendants&lt;Cell&gt;().Count(); cellIndex++) { string columnName = Level[cellIndex]; table.Columns.Add(columnName); } } else { // 添加行 DataRow newRow = table.NewRow(); for ...

    TicTacToe:使用CSS和JavaScript进行游戏

    gameBoard[event.target.cellIndex][event.target.parentNode.rowIndex] = currentPlayer; updateDisplay(event.target); checkWin(); switchPlayer(); } }); }); function updateDisplay(cell) { cell....

    tictactoe

    井字游戏,也被称为“三子棋”,是两个人玩的简单策略游戏。游戏在一个3x3的网格上进行,玩家轮流在空格中放置他们的标记(通常是"X"或"O")。第一个成功在行、列或对角线上放置三个相同标记的玩家获胜。 二、HTML...

Global site tag (gtag.js) - Google Analytics