表格列有两个选择

Question

I have a table with multiple columns. I have two select boxes:

• one to change the background color of the highlighted column
• one to select which column to highlight

This assumes that I click the #colorselect select box first. Do I need to create another function with the #columnselect select box first, then #colorselect function built inside?

Here's what I have so far:

$(function(){
    $("#colorselect").change(function() {
        $("#colorselect option:selected").each(function() {
            if($(this).attr("value")=="red") {
                clr="red"
            }

            if($(this).attr("value")=="green") {
                clr="green"
            }

            if($(this).attr("value")=="") {
                clr="yellow"
            }
        };

        $("#columnselect").change(function() {
            $("#columnselect option:selected").each(function() {
                if($(this).attr("value")=="column1") {
                    columnhighlightsel="Column1"
                }

                if($(this).attr("value")=="column2") {
                    columnhighlightsel="Column2"
                }

                if($(this).attr("value")=="") {
                    columnhighlightsel="Column2"
                }
            }

            for (var i = 0; i<= $("#table th").length; i++) {
                if($.trim($("#dailytable th:nth-child("+i+")").text()) === columnhighlightsel) {
                    varcolumnhighlight=i
                }
            };

            $("#table tbody tr td:nth-child("+columnhighlight+")").each(function() {
                $(this).css('background-color', clr);
            };

Answer 1

I would just write a single function that handles a change in either column. Check if either is blank before executing the code. Then the order doesn't matter.

Then just make the values in your color select the colors you want, and the column the number of the column:

$('#colorselect, #columnselect').change(function() {
  var $color = $('#colorselect').val(),
      $column = $('#columnselect').val();
  if ($color && $column) {
    $("#table tbody tr td:nth-child("+$column+")").each(function(){
      $(this).css('background-color', $color);
    };
  }
});

Depending on your values, you may have to adjust the if condition to be more specific.

Answer 2

 $("#colorselect").change(function(){
           clr = $("#colorselect option:selected").attr("value");
        clr = clr == '' ? 'yellow' : clr;
        color();
    }

   $("#columnselect").change(function(){

         columnhighlightsel= $(this);
        color();
    }

function color(){
   if(!columnhighlightsel || !clr){
      return;
   }
   columnhighlightsel.css('background-color', clr);
}

You now have to get the columnhighlightsel and clr- variables into the color-function context.