jquery – 根据多个选择/隐藏元素更改表格行颜色

我有一张桌子.在每一行我都有一个“选择它”的复选框,两个选择框和一个额外的复选框.

当我显示我的页面时,每行背景颜色是默认的(白色).

我需要的是两件事：

>对于每个“动作”选择框值,我希望行更改其颜色,但仅当选中行复选框时 – 绿色表示“创建”,红色表示“删除”
>如果“动作”选择框值等于“删除”,我希望第二个选择框和额外的复选框被禁用.

目前,我有以下代码,仅根据第一个选择框选项更改行背景颜色,而不考虑复选框的状态.

我该如何实现呢？我不知道如何让这些条件一起工作.

谢谢.

注意：我在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,217);">container 1</td><td style="background-color: rgb(215,217);">a</td><td style="background-color: rgb(215,217);">b</td><td style="background-color: rgb(215,217);">c</td><td style="background-color: rgb(215,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,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,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,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,217);">container 2</td><td style="background-color: rgb(215,217);">d</td><td style="background-color: rgb(215,217);">e</td><td style="background-color: rgb(215,217);">f</td><td style="background-color: rgb(215,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,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,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);

解决方法

您必须将change事件绑定到select和checkBox.然后

>使用$(this).closest(‘tr’)在更改事件中获取父tr.
>使用$tr.find(‘.containers_table’).is(‘：checked’)首先查找
复选框状态并在更改颜色时考虑它.
>使用$tr.find(‘.update-card_configuration,.update-ne_configuration’)查找额外的选择&复选框.并根据操作值使用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 – 根据多个选择/隐藏元素更改表格行颜色

解决方法

猜你在找的jQuery相关文章