Question

我有一个包含表行的表，其中包含2个复选框，一个在student_late类下，另一个在student_present类下。

我希望它能够执行以下操作：

如果仅选中student_present复选框，请通过添加“成功”类使表格变为绿色。

如果选中student_present复选框以及student_late复选框，请通过添加“info”类将表格设为黄色。

如果未选中复选框，请通过添加“危险”类使表格变红。

这是我目前的CoffeScript：

$(document).ready ->
  return $("tr .student_present").each(->
    if @checked
      $(this).closest("tr").addClass "success"
    else
      $(this).closest("tr").addClass "danger"
  )
  $("tr .student_late").each ->
    $(this).closest("tr").addClass "info"  if @checked

或者喜欢JS的人：

$(document).ready(function() {
  return $("tr .student_present").each(function() {
    if (this.checked) {
      return $(this).closest("tr").addClass("success");
    } else {
      return $(this).closest("tr").addClass("danger");
    }
  });
      return $("tr .student_late").each(function() {
        if (this.checked) {
      return $(this).closest("tr").addClass("info");
    }
  });
});

Answer 1

您不需要使用return来准备文档。这是您可以使用的代码。

$(function() {
    $('table tbody tr').each(function() {
       var $row = $(this);
       var late = $row.find('.student_late')[0].checked;
       var present = $row.find('.student_present')[0].checked;
        if(present && !late) {
            $row.addClass('success');
        } else if(present && late) {
            $row.addClass('info');    
        } else if(!present && !late) {
            $row.addClass('danger');    
        }
    });
});

$（function（）只是$（document）.ready（function（）的简写。这是代码工作的JSfiddle。http://jsfiddle.net/5DUwr/

如果要在单击复选框时更新它。使用此代码

$(function() {
    $('table tbody tr').each(function() {
       var $row = $(this);
       updateRow($row);
    });

    $('table tbody tr input[type="checkbox"]').click(function() {
       var $row = $(this).parents('tr');
       updateRow($row);
    });
});

function updateRow($row) {
       $row.removeClass('success danger info');
       var late = $row.find('.student_late')[0].checked;
       var present = $row.find('.student_present')[0].checked;
        if(present && !late) {
            $row.addClass('success');
        } else if(present && late) {
            $row.addClass('info');    
        } else if(!present && !late) {
            $row.addClass('danger');    
        }   
}

这是小提琴http://jsfiddle.net/5DUwr/4/

Answer 2

不是100％确定问题在这里，我刚刚复制了你的代码，它似乎工作正常（显然我没有你的HTML）...... http://jsfiddle.net/VWcXW/

<table>
    <tr>
        <td><input type="checkbox" class="student_present"></input></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="student_present" checked="checked"></input></td>
    </tr>
</table>

$(document).ready(function() {
  return $("tr .student_present").each(function() {
    if (this.checked) {
      return $(this).closest("tr").addClass("success");
    } else {
      return $(this).closest("tr").addClass("error");
    }
  });
      return $("tr .student_late").each(function() {
        if (this.checked) {
               return $(this).closest("tr").addClass("info");
        }
  });
});

Answer 3

它适用于我： http://jsfiddle.net/Ba5qg/

我的意思是，它执行了一次！它不是绑定点击事件来改变背景颜色...... 你可以改变：

$("tr .student_present").on('click', function () {
    if ($(this).is(':checked')) {
        $(this).closest('tr').addClass('success');
        [...]
    }
});

小提琴代码： HTML

<table>
    <tr>
        <td>Paul</td>
        <td><input type='checkbox' name='student_present' class='student_present' checked /></td>
        <td><input type='checkbox' name='student_late' class='student_late' /></td>
    </tr>
    <tr>
        <td>John</td>
        <td><input type='checkbox' name='student_present' class='student_present' /></td>
        <td><input type='checkbox' name='student_late' class='student_late' checked /></td>
    </tr>
</table>

CSS

.success {
    background: green;
}

.error {
    background: red;
}

.info {
    background: yellow;
}

JS 你可以在这里删除你的退货声明！

$(document).ready(function() {
    $("tr .student_present").each(function() {
        if (this.checked) {
            return $(this).closest("tr").addClass("success");
        } else {
            return $(this).closest("tr").addClass("error");
        }
    });
    $("tr .student_late").each(function() {
        if (this.checked) {
            return $(this).closest("tr").addClass("info");
        }
    });
});

Answer 4

您可以为复选框添加唯一ID，即'chk_001'和tr / td标记的ID中的等效数字。然后循环选中复选框，您可以获取要更改的行。当您在tr / td ID（例如tr_001或td_001）中使用相同的数字时，您可以使用getElementById设置所需的类/样式，只要您找到复选框。

Answer 5

我认为这可以更容易实现（Working fiddle）：

HTML

<table>
    <tr>
        <td><input class="student_present" type="checkbox" checked="checked">Present</td>
        <td><input class="student_late" type="checkbox">Late</td>
   </tr>
   <tr>
        <td><input class="student_present" type="checkbox">Present</td>
        <td><input class="student_late" type="checkbox" checked="checked">Late</td>
   </tr>
</table>

CSS

.success {
    background: green;
}

.error {
    background: red;
}

.info{
    background: yellow;
}

JS

$(document).ready(function() {
    $(".student_present").closest('tr').addClass('error');
    $(".student_present:checked").closest('tr').toggleClass('success error');
    $(".student_late:checked").closest('tr').addClass(function() {
        if($('.student_present', $(this).closest('tr')).is(':checked')) return 'info';
        else return '';
    });
});

根据选中的复选框循环表和更改背景

5 个答案: