jquery - 如何找到附加了特定类的 tr 并获取每个 td 的详细信息 - jquery

Question

请检查这个 fiddle 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;
}

查询

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


        }

修改 getdetails(row) 的内容使得

1.每当一行被点击时，相应的复选框就会被勾选

2.可以勾选其他行的复选框，但是那个勾不应该是一行点击(重要)，显然不应该得到 highlightRowSelected 类

1. 如果单击该行并勾选了复选框(按第 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>