Question

这里我要在我点击的行中添加一个类。我面临的问题是我在表格中有一个文本框和下拉字段。但当我点击文本框或下拉输入值时，该功能将被触发。我真正想做的是当我点击该行然后该类应该添加，当我点击表格行内的元素时，该类不应该被添加。

我该怎么做？

这就是我所做的。

<script>
var tabRow = $('.extab tbody tr');    
    tabRow.on('click',function(){
        $(this).addClass('selected');
    })
</script>



<table class="extab">
<tr><th>1</th><th>2</th><th>2</th></tr>
<tbody>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> 
</tbody>
</table>

Answer 1

检查单击的内容是单元格还是带有事件目标的输入

var taBody = $('.extab tbody') 
taBody.on('click', 'tr', function (evt) {
  if($(evt.target).is('td')) {
    $(this).toggleClass('selected');
  }
})

.selected{
  background: red;
}
td{
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="extab">
<tr><th>1</th><th>2</th><th>2</th></tr>
<tbody>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> 
</tbody>
</table>

Answer 2

我在td添加了填充以便更好地说明。这可以根据您的需要完美地完成。

＆＃13;

var tabRow = $('.extab tbody tr');    
tabRow.on('click',function(){
    $(this).addClass('selected');
})
$('.extab tbody tr td *').click(function(e){
  e.stopPropagation(); 
});

＆＃13;

.selected{
  background: red;
}
td{
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="extab">
<tr><th>1</th><th>2</th><th>2</th></tr>
<tbody>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> 
</tbody>
</table>

＆＃13;

Answer 3

你可以这样做：

$('.extab tbody tr td *').click(function(e){ e.stopPropagation(); });

var tabRow = $('.extab tbody tr');    
    tabRow.on('click',function(){
        console.log('row clicked');
        $(this).addClass('selected');
    });

$('.extab tbody tr td *').click(function(e){ e.stopPropagation(); });

tr td {
 padding: 5px;
 background-color : red;
}

tr.selected td {
  background-color : blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="extab">
<tr><th>1</th><th>2</th><th>2</th></tr>
<tbody>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> 
</tbody>
</table>

如何在我单击表行时触发事件，而不是在单击表行元素时触发事件

3 个答案: