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.每当点击一行时，其相应的复选框都会被勾选

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>

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

1 个答案: