根据多个选择/隐藏元素更改表格行颜色
Posted
技术标签:
【中文标题】根据多个选择/隐藏元素更改表格行颜色【英文标题】：Change table row color depending on multiple selections/hide elements 【发布时间】：2018-04-16 14:03:53 【问题描述】：我有一张桌子。在每一行我都有一个“选择它”的复选框，两个选择框和一个额外的复选框。
当我显示我的页面时，每一行的背景颜色都是默认的（白色）。
我需要的是两件事：
对于每个“操作”选择框值，我希望行更改其颜色，但前提是选中行复选框 - 绿色表示“创建”，红色表示“删除”
如果“操作”选择框的值等于“删除”，我希望禁用第二个选择框和额外的复选框。
目前，我有以下代码仅根据第一个选择框选项更改行背景颜色，而不考虑复选框的状态。
我该如何实现呢？我不知道如何让这些条件一起工作。
谢谢。
注意：我在 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);
【问题讨论】：
能否请您也给我们看一下html？它只是一张标准的桌子吗？ 我添加了html代码。除了每行都有选择框之外，这是非常标准的。 它是由另一个库自动生成的吗？ （因为内联 css）如果没有，那就更容易了 嗯，是的......我正在使用drupal，表格是从我制作的自定义模块生成的。我得到数据并动态地创建表。这就是为什么我在 HTML 中有自定义名称。 我对drupal不是很熟悉，但是如果你是模块的作者，你可以把内联css改成classes吧？ 【参考方案1】：您必须将更改事件绑定到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>【讨论】：
谢谢阿齐姆。不幸的是，这不适用于我的代码。最重要的是，当没有选中任何复选框时，我不希望行是橙色的。 我添加了一些额外的js 以使代码在 sn-p 中可用。你只需要替换attach函数的代码。这是我从你的代码中得到的颜色。无论如何，用你的颜色代替我的颜色。 @zephirus
我正在尝试使用我的原始代码并添加您在答案中给出的逻辑。我注意到变量“值”被正确设置为“创建”。但是当我将选择框更改为“删除”时，我也会得到“创建”，而不是删除。这很奇怪。我们可以通过其他方式取得联系吗？
所以。您仍然始终将select 值设为create？ @zephirus
是的。我正在考虑改变一切并从头开始......我认为在这种情况下我需要做这件事但在 drupal 中的人的帮助。【参考方案2】：
我为您找到了解决方案：
$(document).on('blur, keyup', '.update-action .chosen-search-input', function ()
//$(document).on('change', '.update-action', function () // For select option
var specipicValue = 'test'//this is just specific value
var value = $(this).val();
if ($(this).val())
if ($(this).parents('tr').find('.form-checkbox').is(':checked'))
$(this).parents('tr').find('td').css("color", "red");
else
$(this).parents('tr').find('td').css("color", "unset");
if (value == specipicValue)
$(this).parents('tr').find('.update-card_configuration').find('.chosen-search-input').prop("disabled", true);
$(this).parents('tr').find('.update-ne_configuration').attr("disabled", true);
else
$(this).parents('tr').find('.update-card_configuration').find('.chosen-search-input').prop("disabled", false);
$(this).parents('tr').find('.update-ne_configuration').attr("disabled", false);
);
这是预览链接：https://codepen.io/ziruhel/pen/NwbKZK
_如果您需要更多自定义，请告诉我 _ 我用于输入“keyup & in blur”，如果您使用下拉选择，您可以使用“click”。或者让我知道修改。
【讨论】：
我在第 1 行收到此错误：未捕获的 TypeError：$ 不是函数。当没有点击任何行时，表格应该显示默认的 css。 Only if checked must show gree or red depending on the update-action value.此外，codepen 预览什么也不做。 尝试在action texbox上写，看看发生了什么 我实现了您在问题中提到的这两件事。 ` 对于每个“操作”选择框值，我希望行更改其颜色，但前提是选中行复选框。如果“操作”选择框值等于某个特定值，我希望禁用第二个选择框和额外的复选框。 ' 好的，它会将标签更改为红色，但这不是我需要的。我需要更改行背景颜色，而不是点击。取决于当前的选择。另外，当我在 drupal 中使用 js 文件时，它会给我一个错误。如果需要，可以在 Skype 上添加我：zephiruspt@gmail.com 我认为这里的主要问题是我需要覆盖当前应用于表格的 css。我的意思是当我悬停行时，我已经有一些 css 工作，什么时候被选中等等。我在上面实现的行为没有覆盖默认行为。【参考方案3】：仅当您不打算使用层次结构、分组和编辑列时，才适合使用行模板。 Grid 不支持同时应用这些功能和行模板。该方法直接将模板表达式添加到 rowTemplate 和 altRowTemplate 定义，并确定哪些自定义 CSS 类将应用于给定的行或单元格。
<style>
.k-grid
width: 500px;
.discontinued
font-weight: bold;
color: #f00;
.critical
background-color: #fdd;
.warning
background-color: #fda;
.ok
background-color: #ced;
</style>
<div id="grid-rowtemplate"></div>
<script>
// sample datasource
var products = [
ID: 1, ProductName: "Foo", UnitsInStock: 9, Discontinued: false ,
ID: 2, ProductName: "Bar", UnitsInStock: 16, Discontinued: false ,
ID: 3, ProductName: "Baz", UnitsInStock: 3, Discontinued: true
];
var rowTemplateString = '<tr class="#: Discontinued ? "discontinued" : "" #" data-uid="#: uid #">' +
'<td>#: ProductName #</td>' +
'<td class="#: getUnitsInStockClass(UnitsInStock) #">#: UnitsInStock #</td>' +
'<td>#: Discontinued #</td>' +
'</tr>';
var altRowTemplateString = rowTemplateString.replace('tr class="', 'tr class="k-alt ');
function getUnitsInStockClass(units)
if (units < 5)
return "critical";
else if (units < 10)
return "warning";
else
return "ok";
$(document).ready(function ()
$("#grid-rowtemplate").kendoGrid(
dataSource:
data: products,
schema:
model:
id: "ID",
fields:
ID: type: "number" ,
ProductName: ,
UnitsInStock: type: "number" ,
Discontinued: type: "boolean"
,
sortable: true,
columns: [
field: "ProductName", title: "Product Name" ,
field: "UnitsInStock", title:"Units In Stock", width: "120px" ,
field: "Discontinued", width: "120px"
],
rowTemplate: rowTemplateString,
altRowTemplate: altRowTemplateString
);
);
</script>
【讨论】：
约瑟夫，我怎样才能将它应用到 Drupal？以上是关于根据多个选择/隐藏元素更改表格行颜色的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET Razor HTML - 根据值更改表格行的背景颜色