我有一张 table 。在每一行我都有一个复选框来“选择它”,两个选择框和一个额外的复选框。
当我显示我的页面时,每一行的背景颜色都是默认的(白色)。
我需要的是两件事:
对于每个“操作”选择框值,我希望行更改其颜色,但前提是行复选框被选中 - 绿色表示“创建”,红色表示“删除”
如果“操作”选择框的值等于“删除”,我希望禁用第二个选择框和额外的复选框。
目前,我有以下代码仅根据第一个选择框选择更改行背景颜色,而不考虑复选框的状态。
我该如何实现?我不知道如何让这些条件协同工作。
谢谢。
注意:我在 Drupal 中使用此代码,但它是通用的。 第二个注意:这是在 drupal 中使用的,所以我使用的主题已经有表格的 css。例如,当我将鼠标悬停在奇数/偶数行时,已经应用了一些颜色。不知道这是否会影响实现我需要的代码。
HTML:
<table class="containers_table sticky-enabled table-select-processed tableheader-processed sticky-table">
<thead><tr><th class="select-all"><input type="checkbox" class="form-checkbox" title="Select all rows in this table"></th><th>Container</th><th></th><th></th><th></th><th>Action</th><th>Configuration</th><th>scripts</th> </tr></thead>
<tbody>
<tr class="odd"><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-checkbox form-item-containers-table-VT-1">
<input class="containers_table form-checkbox" type="checkbox" id="edit-containers-table-vt-1" name="containers_table[VT_1]" value="VT_1">
</div>
</td><td style="background-color: rgb(215, 234, 217);">container 1</td><td style="background-color: rgb(215, 234, 217);">a</td><td style="background-color: rgb(215, 234, 217);">b</td><td style="background-color: rgb(215, 234, 217);">c</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-select form-item-action-VT-1">
<label class="element-invisible">Action for VT_1 </label>
<select class="update-action form-select chosen-processed" name="action[VT_1]" style="display: none;"><option value="create">create</option><option value="delete">delete</option></select><div class="chosen-container chosen-container-single update-action form-select chosen-processed" title="" style="width: 300px;"><a class="chosen-single">
<span>create</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div></div>
</div>
</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-select form-item-card-configuration-VT-1">
<label class="element-invisible">Card configuration for VT_1 </label>
<select class="update-card_configuration form-select chosen-processed" name="card_configuration[VT_1]" style="display: none;"><option value="default">default</option><option value="HalSim_VT_1_OCC2">HalSim_VT_1_OCC2</option><option value="HalSim_VT_2_OCC2">HalSim_VT_2_OCC2</option><option value="HalSim_VT_3_OCC2">HalSim_VT_3_OCC2</option></select><div class="chosen-container chosen-container-single update-card_configuration form-select chosen-processed" title="" style="width: 300px;"><a class="chosen-single">
<span>default</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div></div>
</div>
</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-checkbox form-item-ne-configuration-VT-1">
<label class="element-invisible">NE configuration for VT_1 </label>
<input class="update-ne_configuration form-checkbox" type="checkbox" name="ne_configuration[VT_1]" value="1">
</div>
</td> </tr>
<tr class="even"><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-checkbox form-item-containers-table-VT-2">
<input class="containers_table form-checkbox" type="checkbox" id="edit-containers-table-vt-2" name="containers_table[VT_2]" value="VT_2">
</div>
</td><td style="background-color: rgb(215, 234, 217);">container 2</td><td style="background-color: rgb(215, 234, 217);">d</td><td style="background-color: rgb(215, 234, 217);">e</td><td style="background-color: rgb(215, 234, 217);">f</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-select form-item-action-VT-2">
<label class="element-invisible">Action for VT_2 </label>
<select class="update-action form-select chosen-processed" name="action[VT_2]" style="display: none;"><option value="create">create</option><option value="delete">delete</option></select><div class="chosen-container chosen-container-single update-action form-select chosen-processed" title="" style="width: 300px;"><a class="chosen-single">
<span>create</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div></div>
</div>
</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-select form-item-card-configuration-VT-2">
<label class="element-invisible">Card configuration for VT_2 </label>
<select class="update-card_configuration form-select chosen-processed" name="card_configuration[VT_2]" style="display: none;"><option value="default">default</option><option value="HalSim_VT_1_OCC2">HalSim_VT_1_OCC2</option><option value="HalSim_VT_2_OCC2">HalSim_VT_2_OCC2</option><option value="HalSim_VT_3_OCC2">HalSim_VT_3_OCC2</option></select><div class="chosen-container chosen-container-single update-card_configuration form-select chosen-processed" title="" style="width: 300px;"><a class="chosen-single">
<span>default</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div></div>
</div>
</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-checkbox form-item-ne-configuration-VT-2">
<label class="element-invisible">NE configuration for VT_2 </label>
<input class="update-ne_configuration form-checkbox" type="checkbox" name="ne_configuration[VT_2]" value="1">
</div>
</td> </tr>
</tbody>
</table>
JQUERY:
(function($) {
Drupal.behaviors.mymoduleColorRows = {
attach: function(context) {
// Bind change event to select
$('.update-action').change(function(){
setColors();
});
$('.edit-containers-table-groove-vt-1').change(function(){
setColors2();
});
// Call function on first page load
setColors();
function setColors() {
// Loop rows
$('.containers_table tr').each(function(){
// Get color from value of select
var color = $(this).find('.update-action').val() == 'create' ? '#D7EAD9' : '#F5BE8B';
// Set color
$(this).find('td').css({'background-color': color});
});
}
function setColors2() {
// Loop rows
$('.containers_table tr').each(function(){
// Get color from value of select
var color = '#F5BE8B';
// Set color
$(this).find('td').css({'background-color': color});
});
}
}
};
})(jQuery);
最佳答案
您必须将更改事件绑定(bind)到 select
和 checkbox
。然后
- 使用
$(this).closest('tr')
获取更改事件中的父级tr
。 - 首先使用
$tr.find('.containers_table').is(':checked')
查找 复选框状态并在更改颜色时考虑它。 - 使用
$tr.find('.update-card_configuration, .update-ne_configuration')
查找额外的select
&checkbox
。并根据操作值使用prop()
方法启用/禁用它们。
var Drupal = function() {};
Drupal.behaviors = function() {};
(function($) {
Drupal.behaviors.mymoduleColorRows = {
attach: function(context) {
// Bind change event to select
$('.update-action, .containers_table').change(function() {
// Get color from value of select & checkbox
var $tr = $(this).closest('tr'),
color = '#F5BE8B',
value = $tr.find('.update-action').val(),
status = $tr.find('.containers_table').is(':checked');
if (value == 'create' && status)
color = '#D7EAD9';
//enable/disable extra select box and checkbox
$tr.find('.update-card_configuration, .update-ne_configuration').prop('disabled', value == 'delete');
// Set color
$tr.css('background-color', color);
});
//call event on first page load
$('.update-action').change();
}
};
})(jQuery);
Drupal.behaviors.mymoduleColorRows.attach();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="containers_table sticky-enabled table-select-processed tableheader-processed sticky-table">
<thead>
<tr>
<th class="select-all">
<input type="checkbox">
</th>
<th>Container</th>
<th></th>
<th></th>
<th></th>
<th>Action</th>
<th>Configuration</th>
<th>scripts</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="containers_table" type="checkbox">
</td>
<td>container 1</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>
<label>Action for VT_1 </label>
<select class="update-action">
<option value="create">create</option>
<option value="delete">delete</option>
</select>
</td>
<td>
<label>Card configuration for VT_1 </label>
<select class="update-card_configuration">
<option value="default">default</option>
<option value="HalSim_VT_1_OCC2">HalSim_VT_1_OCC2</option>
<option value="HalSim_VT_2_OCC2">HalSim_VT_2_OCC2</option>
<option value="HalSim_VT_3_OCC2">HalSim_VT_3_OCC2</option>
</select>
</td>
<td>
<label>NE configuration for VT_1 </label>
<input class="update-ne_configuration" type="checkbox">
</td>
</tr>
<tr>
<td>
<input class="containers_table" type="checkbox">
</td>
<td>container 2</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>
<label>Action for VT_2 </label>
<select class="update-action">
<option value="create">create</option>
<option value="delete">delete</option>
</select>
</td>
<td>
<label>Card configuration for VT_2 </label>
<select class="update-card_configuration">
<option value="default">default</option>
<option value="HalSim_VT_1_OCC2">HalSim_VT_1_OCC2</option>
<option value="HalSim_VT_2_OCC2">HalSim_VT_2_OCC2</option>
<option value="HalSim_VT_3_OCC2">HalSim_VT_3_OCC2</option>
</select>
</td>
<td>
<label>NE configuration for VT_2 </label>
<input class="update-ne_configuration" type="checkbox">
</td>
</tr>
</tbody>
</table>
关于jquery - 根据多个选择/隐藏元素更改表格行颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47102554/