Tableの一行のaリンクを省きたい。

Question

テーブルの一行をクリックして、その行内にあるチェックボックスへチェックをいれて、背景色に色づけしたいと思っています。

出来る様にはなったのですが、クリックした行の中に"aリンク"が入っており"aリンク"だけは、機能しないようにしたいのです。

●jQuery

$('#mcheck tr').click(function() {
			//tr要素からチェックボックスを探す。
			var $check=$(this).children('td').children('input[type=checkbox]');
			var $no=$(this).children('td').children('a').data("no");
				if($check.prop("checked")) {
				//■checkboxにチェックがある場合。
				$check.prop('checked',false);
				$checkno=0;
				$(this).removeClass('checkselect');
			}else{
				//■checkboxにチェックがない場合。
				$check.prop('checked',true);
				$checkno=1;
				//クラスの追加
				$(this).addClass('checkselect');
			}
		});
		

セレクターで特定できるのかと思い、

$('#mcheck tr a:not(.newkomoku)').click(function() {
・・・・・

としましたが、うまくいかなかったのでクリックした部分が"aリンク"の時は、returnしようと思いついて

var target=$(e.target);
			if($(e.target[0])=="a.newkomoku") {
				return;
			}

e.targetからどうやって"aリンク"を判別すればよいのか分かりませんでした。
if文以降は、訳が分からず記述しています。

セレクターで特定したほうが良いのか、"aリンク"を判別したほうが良いのでしょうか。
それともそもそもこういった考え方が間違っているのでしょうか。
よろしくお願いします。

html
<省略>
	<table id="mcheck" class="table table-striped table-bordered" cellspacing="0" width="100%">
			<thead>
    			<tr>
                	<th>Check</th>
        			<th>実行時</th>
            		<th>項目名</th>
            		<th>実行者</th>
            		<th>内容</th>
            		<th>ファイルパス</th>
            		<th>アプリ</th>
            		<th>提出先</th>
                     <th>IMPATH</th>
            		<th>NO</th>
            		<th>ORDERBY</th>
                    <th>CHECKNO</th>
                    <th>SYAINCD</th>
        		</tr>                                                                                   
    		</thead>
            <tbody id="sortable">
                        <tr class="rowtr">
            	                <td class="rank"><input type="checkbox" name="checkno" value="1" class="checkbox-inline"></td>
                				
       		<td class="rank"><a href="monthmanual/mcheckdataupdatedisp/" class="newkomoku">月末</a></td>
                <td class="rank"><a href="monthmanual/mcheckdataupdatedisp/" class="newkomoku">売上高予算表</a></td>
<省略>

<script src="./js/jquery-2.2.3.min.js"></script>
<script src="./js/jquery-ui.js"></script>
<script src="./js/bootstrap.js"></script>
<script src="./datatables/js/jquery.dataTables.js"></script>
<script src="./datatables/js/dataTables.bootstrap.min.js"></script>
<script src="./js/komokuinput/m_checksheet.js"></script>
<script src="./js/jquery.magnific-popup.js"></script>

CSS
table#mcheck .checkselect {
  background-color: #A7AB15;
  font-color: #ffffff;
  font-weight: bold;
}

*DataTablesを使用しています。
よろしくお願いします。

Comments

[CyberMergina]

こんにちは。一つ質問させてください。「aタグの背景は白いままにしたい」ということでしょうか？

[manabunbun]

aタグを含めて一行すべて背景色を変更したいです。

Answer 1

こんにちは。

以下の書き方で、クリックされた要素に対して
「以降の処理を止める」書き方が出来ます。

$('#mcheck tr').click(function(e) {
  // クリックされた要素がaタグだったら、止める。
  if ( e.target.tagName === "A" ) {
    return false;
  }
  /* 今までの処理 */
});

Comments

[manabunbun]

if ( e.target.tagName === "A" ) {
return false;
}
"A"は、大文字でないとダメなのですね。
このやり方でうまくいきました。ありがとうございました。

Answer 2

もうすこし簡単な例で・・・

tr.checkselect td{background-Color:lime;}

$(function(){
  $('#mcheck input[type=checkbox]')
    .on('click',function(e){
      e.stopPropagation();
    })
   .on('change',function(){
     if($(this).prop('checked')){
       $(this).parents('tr').first().addClass('checkselect');
     }else{
       $(this).parents('tr').first().removeClass('checkselect');
     }
    }).change();
  $('#mcheck a').on('click',function(e){
    e.stopPropagation();
  });
  $('#mcheck tr').on('click',function(e){
    $(this).find('input[type=checkbox]').prop('checked',function( index, prop ){return !prop;}).change();
  });
});

<table id="mcheck">
<tr>
<td><input type="checkbox" checked></td>
<td><a href="#">test</a></td>
<td>test</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><a href="#">test</a></td>
<td>test</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><a href="#">test</a></td>
<td>test</td>
</tr>
</table>

Comments

[manabunbun]

イベントをそれぞれに分けて記述すれば良かったんですね。
"e.stopPropagation();"は、知りませんでした。
大変参考になりました。ありがとうございました。

[manabunbun]

イベントをそれぞれ記述すれば良かったのですね。
"e.stopPropagation();"は、知りませんでした。
大変参考になりました。
ありがとうございました。

Answer 3

「$(e.target).prop('tagName')」や「e.target.tagName」でタグ名が取得できますが。。。

Comments

[manabunbun]

e.target.tagName==="A"
で取得できました。
ありがとうございました。