如何找到具有連接特定類別的TR，並得到各TD的細節 - jQuery的

Question

請看看這個小提琴 https://jsfiddle.net/shaswatatripathy/y7jqb5hp/12/

HTML

<table id="tableID"> 
    <tr onclick="getdetails(this)"> 
    <th>checkbox</th> 
    <th>Company</th> 
    <th>Contact</th> 
    <th>Country</th> 
    </tr> 
    <tr onclick="getdetails(this)"> 
    <td><input name="eachRow" type="checkbox"/> </td> 
    <td>Alfreds </td> 
    <td>Maria </td> 
    <td>Germany</td> 
    </tr > 
    <tr onclick="getdetails(this)"> 
    <td><input name="eachRow" type="checkbox"/> </td> 
    <td>Centro </td> 
    <td>Francisco </td> 
    <td>Mexico</td> 
    </tr> 
    <tr onclick="getdetails(this)"> 
    <td><input name="eachRow" type="checkbox"/> </td> 
    <td>Ernst </td> 
    <td>Roland </td> 
    <td>Austria</td> 


</table> 

CSS

table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 

.highlightRowSelected 
{ 
    background-color:#e2e2e2; 
} 

Jquery

function getdetails(row) { 
$("#tableID tbody tr").each(function() {   
     $(this).removeClass("highlightRowSelected");   
    });  
    $(row).addClass("highlightRowSelected"); 


     } 

什麼修改getdetails（行），這樣

1.whenever一排被點擊其相應的複選框勾選得到

2，其他行的複選框，可以勾選，但剔不應該是一個連續的點擊（重要），顯然不應該highlightRowSelected類

如果行被點擊，並且具有勾選複選框（由點1），然後點擊複選框不應該取消選中該複選框

只允許jQuery的

Answer 1

$('#tableID input[type="checkbox"]').on('click', function(event){ 
 
    // if tr has class "highlightRowSelected" do not let the click on the checkbox happen 
 
    if($(this).closest('tr').hasClass('highlightRowSelected')) { 
 
    event.preventDefault(); 
 
    event.stopPropagation(); 
 
    return; 
 
    } 
 
    
 
    // if click on checkbox do not go for click on the <tr> 
 
    // which also happend, because the checkbox is inside <tr> 
 
    event.stopPropagation(); 
 
}); 
 

 
$('#tableID tr').on('click', function(){ 
 
    if($(this).hasClass('highlightRowSelected')) { 
 
     $(this).find('input[type="checkbox"]').prop('checked', false); 
 
     $(this).removeClass("highlightRowSelected"); 
 
    } else { 
 
     // check if there is already a class highlightRowSelected 
 
     // if so return (means, skip rest of code) 
 
     // so in whole table only one .highlightRowSelected is allowed 
 
     if($(this).closest('table').find('.highlightRowSelected').length >= 1){ 
 
      return; 
 
     } 
 
     $(this).find('input[type="checkbox"]').prop('checked', true); 
 
     $(this).addClass("highlightRowSelected"); 
 
    } 
 
});

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td, th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
.highlightRowSelected 
 
{ 
 
    background-color:#e2e2e2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tableID"> 
 
    <tr> 
 
    <th>checkbox</th> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td><input name="eachRow" type="checkbox"/> </td> 
 
    <td>Alfreds </td> 
 
    <td>Maria </td> 
 
    <td>Germany</td> 
 
    </tr > 
 
    <tr> 
 
    <td><input name="eachRow" type="checkbox"/> </td> 
 
    <td>Centro </td> 
 
    <td>Francisco </td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input name="eachRow" type="checkbox"/> </td> 
 
    <td>Ernst </td> 
 
    <td>Roland </td> 
 
    <td>Austria</td> 
 

 

 
</table>