行の代わりに特定のテーブルの列にカラーボックスのポップアップ

Question

次のコードを使用してテーブル行の任意の場所をクリックすると、カラーボックスポップアップが作成されました。今は、誰かが2番目の列をクリックした場合にのみ、ポップアップを開きたいと思います。

$(".inline").colorbox({inline:true, width:"50%"}); 

<tr class="inline" href="#123"> 
    <td>Name</td> 
    <td>Address</td> 
</tr> 

<div style='display:none'> 
    <div id='123' class="colorbox_content"> 
      <p><strong>Title Here</strong></p> 
      <p>Description</p> 
    </div> 
</div> 

私はtd上のクラスを適用しようとも$("table td #2")に$(".inline")からのjQueryを変更しようとしましたが、何も働きました。

Answer 1

試してください：あなたは短いセレクターで逃げることができ

$('table > tbody > tr > td:nth-of-type(2)').colorbox({inline:true, width:"50%"}); 

、あなたが実験する必要があると思います。そこには> tbodyがあります。そこに置かれているかどうかは、ブラウザがデフォルトでそこに配置するためです。 DOMをトラバースするときは、テーブルについて覚えておくことが重要です。

SNIPPET

$('table > tbody > tr > td:nth-of-type(2)').css('background', 'red');

td { 
 
    border: 2px solid black 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
</table>

Answer 2

あなたはイベントがテーブルの行に伝播されているテーブルセルをクリックしてください。

クリックイベントの伝播を停止すれば十分です。

https://github.com/jackmoore/colorboxを使用している場合、href属性を使用して表の行にカラーボックスを添付しているため、2番目のセルにカラーボックスを追加することはできません。

だから、私の提案は次のとおりです。

$(".inline").colorbox({ 
 
    inline: true, width: "50%", 
 
    open: false 
 
}); 
 
$(".inline td").on('click', function (e) { 
 
    if ($(this).index() != 1) { 
 
    e.stopPropagation(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/jackmoore/colorbox/master/jquery.colorbox-min.js"></script> 
 

 
<table> 
 
    <tbody> 
 
    <tr class="inline" href="#123"> 
 
     <td>Name</td> 
 
     <td>Address</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<div style='display:none'> 
 
    <div id='123' class="colorbox_content"> 
 
     <p><strong>Title Here</strong></p> 
 

 
     <p>Description</p> 
 
    </div> 
 
</div>