1

我有一个带有表格行的表格，其中包含 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");
    }
  });
});
4

5 回答 5

2

您不需要使用 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/

于 2013-04-16T14:25:21.670 回答
0

you can add unique ids for your checkboxes i.e. 'chk_001' and eqivalent numbers in the ids of the tr/td tags. Then looping through the checkboxes your can grab the rows you want to change. When you use the same numbers in the tr/td ids (like tr_001 or td_001) you can set the desired classes/styles using getElementById wherever you find the checkbox checked.

于 2013-04-16T14:16:28.053 回答
0

不是 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");
        }
  });
});
于 2013-04-16T14:11:21.050 回答
0

它对我来说很好：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");
        }
    });
});
于 2013-04-16T14:12:58.337 回答
0

我认为这可以更容易实现（工作小提琴）：

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 '';
    });
});
于 2013-04-16T14:24:38.400 回答