0

我有一个包含数据的 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") &&
                    (elements[i].id.indexOf("lnkHidden") > -1)) {
                        //opne in a new window//  window.open(elements[i].href);
                        location.href=elements[i].href
                        break;
                    }
                }
                return false;
            }

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

最好的祝愿

4

1 回答 1

2

你可以做几件事：

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

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：

  1. 在标签的data-属性中放置单击行时要打开的链接。TR（例如<tr data-link="http://www.link.com")>
  2. 仅使用一个 onclick 处理程序：将其放在桌子上

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

    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...
}

  4. 如果目标在第一个 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 ​</p> 

$('#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/

于 2012-05-12T20:21:42.950 回答