Question

我有这个示例代码来突出显示表的特定单元格。有没有办法同时切换颜色或使用多种颜色？

我正在尝试按下按钮来切换高亮显示的颜色。默认情况下，选择值时，它将以绿色突出显示。我想要一个按钮，这样当我点击时，我的下一个选择将是一个不同的颜色。因此，每次单击此按钮时，下一个选择将是不同的颜色。有没有一种简单的方法来实现这一目标？

这是小提琴https://jsfiddle.net/g28xasd7/和我的代码：

$('.selector').each(function() {
    $(this).on('click', check);
});

$('.all').each(function() {
    $(this).on('click', all);
});

function all(event) {
    if ($(this).is(':checked')) {
        $("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
    } else {
        $("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
    }

    //$('.selector').prop("checked", this.name === "SelectAll");

    check(event);
}

function check(event) {
    var checked = $(".selector:checked").map(function() {
        return this.name
    }).get()
    $('td').removeClass("highlight").filter(function() {
        return $.inArray($(this).text(), checked) >= 0
    }).addClass("highlight")
    if ($(this).is(".selector"))
        $('.all').not(this).prop("checked", false)
}

还是有另一种改变颜色的方法吗？

Answer 1

注意ID，它们必须是唯一的。而不是类我直接使用背景颜色。

我的摘要是：

＆＃13;

$(function () {
  $('.selector').on('click', function(e) {
    var checked = this.name;
    var selectedColor = '';

    if (this.checked) {
      selectedColor = $('#nextColor').val();
      
      // instead if you need a random color generated automatically:
      // selectedColor = '#'+Math.floor(Math.random()*16777215).toString(16);
    }
    $('td').filter(function() {
      return this.textContent == checked;
    }).css('background-color', selectedColor);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
    <div id="sidebar1">
        <body class="twoColLiqLt">
        <div id="container1">
            <div id="sidebar11">
                <h3>Choose a color: <input id="nextColor" type="color" value="#9ac99d"> Parameters:</h3>

                <form id="form1" name="form1" method="post" action="">
                    <label>
                        <input type="checkbox" name="A" class="selector"/>A</label>
                    <label>
                        <input type="checkbox" name="B" class="selector"/>B</label>
                    <label>
                        <input type="checkbox" name="12" class="selector"/>12</label>
                    <label>
                        <input type="checkbox" name="Y" class="selector"/>Y</label>
                    <label>
                        <input type="checkbox" name="Z" class="selector"/>Z</label>

                </form>

                <form id="form2" name="form2" method="post" action="">

                    <label>
                        <input type="checkbox" name="K" class="selector"/>K</label>
                    <label>
                        <input type="checkbox" name="J" class="selector"/>J</label>
                    <label>
                        <input type="checkbox" name="M" class="selector"/>M</label>
                    <label>
                        <input type="checkbox" name="T" class="selector"/>T</label>
                    <label>
                        <input type="checkbox" name="N" class="selector"/>N</label>

                </form>
            </div>
        </div>

        <div id="mainContent">
            <h3 align="right">&nbsp;</h3>

            <div>
                <table width="200" border="1">
                    <tr>
                        <td>A</td>
                        <td>&nbsp;</td>
                        <td>M</td>
                        <td>&nbsp;</td>
                        <td>K</td>
                        <td>J</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>B</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td> 12</td>
                        <td>&nbsp;</td>
                        <td>12</td>
                        <td>&nbsp;</td>
                        <td>Y</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>M</td>
                        <td>&nbsp;</td>
                        <td>T</td>
                        <td>K</td>
                        <td>&nbsp;</td>
                        <td>Z</td>
                    </tr>
                </table>
            </div>
        </div>

＆＃13;

Answer 2

这是可行的方法，您可以使用此功能改进代码。

$('.selector').each(function() {
  $(this).on('click', check);
});
function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
function check(event) {
  var checked = $(".selector:checked").map(function() {
    return this.name
  }).get()
  $('td').css('background-image', 'none').filter(function() {
    return $.inArray($(this).text(), checked) >= 0
  }).css('background-color', getRandomColor());
  if ($(this).is(".selector"))
    $('.all').not(this).prop("checked", false)
}

带jquery

2 个答案: