Question

我有一个包含数据的html表。当我点击表格行时，我使用此JavaScript打开新页面：

function addOnclickToDatatableRows() {
                //gets all the generated rows in the html table
                var trs = document.getElementById('form:dataTable').getElementsByTagName('tbody')[0]
                .getElementsByTagName('tr');
                //on every row, add onclick function (this is what you're looking for)
                for (var i = 0; trs.length > i; i++) {
                    trs[i].onclick = new Function("rowOnclick(this)");
                }
            }

            function rowOnclick(tr) {
                var elements = tr.cells[0].childNodes;
                for(var i = 0; elements.length > i; i++) {
                    if ((typeof elements[i].id !== "undefined") &amp;&amp;
                    (elements[i].id.indexOf("lnkHidden") > -1)) {
                        //opne in a new window//  window.open(elements[i].href);
                        location.href=elements[i].href
                        break;
                    }
                }
                return false;
            }

当我点击一行时，如何修改脚本以排除第一列。在表格的第一列，我有复选框，我不想点击并打开新页面

祝福

Answer 1

你可以做几件事：

如果你想继续使用你提供的脚本，可以在td上设置onclick而不是tr，并跳过第一个。你必须在...之间写下这个部分，但这不应该是难的

function addOnclickToDatatableRows() {
  //gets all the generated rows in the html table
  var trs = document.getElementById('form:dataTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
  //on every row, add onclick function (this is what you're looking for)
  for (var i = 0; trs.length > i; i++) {
     var tds = trs[i].getElementsByTagName('td');        
     for (var j = 1; j <= tds.length; j++) {
       tds[j].onclick = new Function("colOnclick(this)");
     }
  }
}

function colOnclick(td) {
  var link = ...get the link from the tr using parentNode...
  location.href=link
  return false;
}

但是我会像这样更改html和javascript：

点击data-标记的TR属性中的行时，请打开要打开的链接。（例如<tr data-link="http://www.link.com")>
只使用一个onclick处理程序：将其放在表本身上

我点击处理程序找出了目标：

function handler(e) {

  var targ;
  if (!e) var e = window.event;
  if (e.target) targ = e.target;
  else if (e.srcElement) targ = e.srcElement;

  do stuff with targ...
}

如果目标位于第一个td或tr中，则忽略它。否则确定目标所在的tr，获取data-link属性并将其打开。

我也会使用jQuery或类似的东西来做繁重的工作。在那种情况下，它会容易得多。您需要的唯一代码是：

HTML：

<table id="idOfTable">
    <tr data-link="http://www.ledlamp.nl">
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
    </tr>
    <tr data-link="http://www.isaac.nl">
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
    </tr>
</table>

jQuery

$('#idOfTable').delegate('td:gt(0)', 'click', function() { 
   document.location.href = $(this).closest('tr').data('link')
});

在其中我选择了您想要处理所有点击的表格。只会点击与CSS3选择器td:gt(0)匹配的点击元素。（此选择器返回所有不是第一个的td。）。单击时，它会找到最接近的TR（其TR父级），并使用.data()函数获取数据链接属性。正如您所看到的，jQuery可以在几行代码中非常强大。

我为你创建了一个jsfiddle示例。这是：http://jsfiddle.net/TDjhT/

修改JavaScript以从打开新页面中排除第一列

1 个答案: