如何将 onclick 事件添加到表格列？

Posted 2023-05-09

【中文标题】如何将 onclick 事件添加到表格列？

【英文标题】：How can I add onclick event to a table column?

【发布时间】：2013-10-15 15:26:36

【问题描述】：

我正在尝试使用 javascript 将 onclick 事件添加到表列。例如，在第一列或第二列启用了onclick 事件！以下函数用于行，但我需要针对特定​​列编辑此函数。

function addRowHandlers() 
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for(i = 0; i < rows.length; i++) 
        var currentRow = table.rows[i];
        var createClickHandler = function (row) 
            return function () 
                var cell = row.getElementsByTagName("td")[0];
                var id = cell.innerhtml;
                alert("id:" + id);
            ;
        ;

        currentRow.onclick = createClickHandler(currentRow);
    

【问题讨论】：

我在你的“问题”中没有看到一个问号

杰米·泰勒。我编辑了我的问题。那样可以么？ :)

也许将类添加到您想要事件的单元格，然后绑定到类。

@gwillie 我怎样才能在这个函数中使用类？（它的语法是什么？）

为每个“td”创建一个类名作为列号，然后单击任何“d”标签进行检查！

【参考方案1】：

试试这个工作解决方案。

function addRowHandlers() 
 var table = document.getElementById("tableId");
 var rows = table.getElementsByTagName("tr");
    
 for (i = 0; i < rows.length; i++) 
   var currentRow = table.rows[i];
   currentRow.onclick = createClickHandler(currentRow);
 


function createClickHandler(row) 
  return function()  
    var cell = row.getElementsByTagName("td")[0];// if you put 0 here then it will return first column of this row
    var id = cell.innerHTML;
    alert("id:" + id);
  ;


addRowHandlers();

Working Demo

【参考方案2】：

向受影响的行/列添加类会更加灵活。

如果您知道行/列对第 1 行和第 2 行执行类似的操作（未经测试）：

var $table = jQuery('#tableId');
var $rows = jQuery('tr:nth-child(0),tr:nth-child(1)', $table);
$rows
    .addClass('event-1')
    .click(function()
    
      // do what on click event
      alert(jQuery(this).html());
    );

【参考方案3】：

这是使用jQuery返回行号和列号的代码，一定有帮助 Jsfiddle link

$('td').on('click',function() 
                var col = $(this).parent().children().index($(this));
                var row = $(this).parent().parent().children().index($(this).parent());
                alert('Row: ' + row + ', Column: ' + col);
            );

【参考方案4】：

您可以仅将单个onclick 处理程序附加到您的表，然后识别单击的列，这种技术称为event delegation：

document.getElementById("tableId").onclick = columnHandler;

function columnHandler(e) 
    e = e || window.event; //for IE87 backward compatibility
    var t = e.target || e.srcElement; //IE87 backward compatibility
    while (t.nodeName != 'TD' && t.nodeName != 'TH' && t.nodeName != 'TABLE') 
        t = t.parentNode;
    
    if (t.nodeName == 'TABLE') 
        return;
    
    var c = t.parentNode.cells;
    var j = 0;
    for (var i=0; i<c.length; i++)
        if (c[i] == t) 
            j = i;
        
    
    alert('You clicked on row #'+(j+1)+ ' , cell content = '+t.innerHTML);

JSFiddle example