改变表's列的颜色通过取决于选择

Change table's column color through depending on select

本文关键字：颜色 取决于 选择 改变      更新时间：2023-09-26

我有一个有3列的表，我想把它的颜色改成绿色，这取决于我在检查表(表单)上选择了什么。

我想改变在GREEN列取决于我选择的城市。例如，如果我选择纽约，那么纽约栏变成绿色。什么好主意吗?

HTML - Table:

<table id="myTable">
    <tr class="head">
        <th></th>
        <th>New York</th>
        <th>Chicago</th>
        <th>San Francisco</th>
    </tr>
    <tr>
        <th>A Poetic Perspective</th>
        <td>Sat, 4 Feb 2012<br />11am - 2pm</td>
        <td>Sat, 3 Mar 2012<br />11am - 2pm</td>
        <td>Sat, 17 Mar 2012<br />11am - 2pm</td>
    </tr>
    <tr class="even">
        <th>Walt Whitman at War</th>
        <td>Sat, 7 Apr 2012<br />11am - 1pm</td>
        <td>Sat, 5 May 2012<br />11am - 1pm</td>
        <td>Sat, 19 May 2012<br />11am - 1pm</td>
    </tr>
    <tr>
        <th>Found Poems &amp; Outsider Poetry</th>
        <td>Sat, 9 Jun 2012<br />11am - 2pm</td>
        <td>Sat, 7 Jul 2012<br />11am - 2pm</td>
        <td>Sat, 21 Jul 2012<br />11am - 2pm</td>
    </tr>
    <tr class="even">
        <th>Natural Death: An Exploration</th>
        <td>Sat, 4 Aug 2012<br />11am - 4pm</td>
        <td>Sat, 8 Sep 2012<br />11am - 4pm</td>
        <td>Sat, 15 Sep 2012<br />11am - 4pm</td>
    </tr>
</table>

HTML - Form:

<form name="myForm" method="POST">
    <fieldset>
        <legend>Register your interest</legend>
        <p><label class="title" for="name">Your name:</label>
            <input type="text" name="name" id="name"><br />
            <label class="title" for="email">Your email:</label>
            <input type="text" name="email" id="email"></p>
            <label class="title" for="persons">Persons:</label>
            <input id="personsId" type="text" name="persons" id="persons"></p>
        <p><label for="location" class="title">Your closest center:</label>
            <select class="target" name="location" id="location">
                 <option id="1" value="ny">New York</option>
                 <option id="2" value="il">Chicago</option>
                 <option id="3" value="ca">San Francisco</option>
            </select></p>
        <span class="title">Are you a member?</span>
        <label><input type="radio" name="member" value="yes" /> Yes</label>
        <label><input type="radio" name="member" value="no" /> No</label></p>
    </fieldset>
<div class="submit" id="myButton"><input type="button" value="Register" /></div>
</form>

脚本:

<script type="text/javascript">
    $(document).ready(function(){
        $( ".target" ).change(function() {
            $("tr:even").css("background-color", "green");
        });
    });
</script>

不使用if else，添加data-city属性来映射下拉列表的哪个值对应于表的哪个列。向th中加入data-city 

<th data-city="ny">New York</th>
<th data-city="il">Chicago</th>
<th data-city="ca">San Francisco</th>

根据下拉值选择第th项并获得其索引。获取基于该索引的整个列(tds)并更改css。

$(document).ready(function(){
  $( ".target" ).change(function() {
    var city = $(this).val(); // <--- the value from drop down
    var index = $('#myTable th[data-city="'+city+'"]').index()+1; 
    $("td").css("background-color", "transparent"); // <--- reset the color to all columns
    $("td:nth-child("+index+")").css("background-color", "green");
  }).change(); // <-- color the column on load 
});

这里是一个演示http://jsbin.com/leqinun/1/edit?html,js,output

相关文章：