Question

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

当我显示我的页面时，每行背景颜色是默认的（白色）。

我需要的是两件事：

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

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

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

感谢。

注意：我在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);

Answer 1

您必须将更改事件绑定到checkbox和$(this).closest('tr')。然后

使用tr在更改事件中获取父$tr.find('.containers_table').is(':checked')。
先使用$tr.find('.update-card_configuration, .update-ne_configuration')查找复选框状态，并在更改颜色时考虑它。
使用select查找额外的checkbox＆amp; 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>

Private Function MakeIN(sArr() As String) As String
Dim i As Long
Dim lUB As Long

lUB = UBound(sArr)

For i = LBound(sArr) To lUB
    MakeIN = MakeIN & "'" & sArr(i) & "'"
    If i < lUB Then MakeIN = MakeIN & ","
Next i
End Function

Answer 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

如果您需要更多自定义，请让我_ 我用于输入＆＃39; keyup＆amp;在模糊＆＃39;，如果您使用下拉选择，您可以使用＆＃39;点击＆＃39;。或者让我知道修改。

Answer 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>

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

3 个答案: