2012-05-12 1 views
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; 
      } 

:私は、テーブルの行をクリックしたとき、私は新しいページを開くには、このJavaScriptを使用しています。表の最初の列には、私は新しいページをクリックして開くようにしたくないチェックボックスを持って

お祈り申し上げます

答えて

2

あなたは物事のカップル行うことができます:あなたが残しておきたい場合は

を提供したスクリプトを使用すると、trの代わりにtdのonclickを設定し、最初のものをスキップすることができます。あなたは間...あなた自身の部分を記述する必要がないだろうが、それは何も、私はしかし、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++) { 
    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; 
} 

ハードでなければなりません:

  1. したいリンクを張って下さいTRタグのdata-属性の行をクリックすると開きます。 (例えば<tr data-link="http://www.link.com")>
  2. のみを使用して1のonclickハンドラ:テーブル自体
  3. の上に置くI対象外クリックハンドラフィギュア:

    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ターゲットがデータ・リンク属性を取得し、内側あり、それを開いて決める。それを無視。

また、私はjQueryのか、力仕事を行うに似たものを使用すると思います。その場合には、それはムーです簡単です私はあなたがすべてのクリックを処理するテーブルを選択し、それに

<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') 
});​ 

HTML:あなたが必要とするだけのコードはこれです。 CSS3セレクタtd:gt(0)と一致するクリックされた要素だけが聴かれます。 (このセレクタは、最初のものではないすべてのtdを返します。)クリックすると、最も近いTR(そのTR親)が検索され、.data()関数を使用してデータリンク属性が取得されます。ご覧のとおり、jQueryは数行のコードで非常に強力です。

あなたのためにjsfiddleの例を作成しました。ここにあります:http://jsfiddle.net/TDjhT/

+1

どのように私はJavaScriptを簡略化できますか?他にもっと簡単な解決策がありますか? –

+0

はい、jqueryを使用してください。をする方法知ってますか? – koenpeters

+1

私は私の答えを変えました。これは、今すぐ下のjQueryバージョンを含んでいます。 jQueryをインクルードするだけでスクリプトが動作します。 http://docs.jquery.com/Downloading_jQuery – koenpeters

関連する問題