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

あなたはいくつかのことをすることができます：

提供したスクリプトを引き続き使用したい場合は、tr の代わりに td に 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 ハンドラーを 1 つだけ使用する: テーブル自体に配置する

  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 に答える