javascript - 如何使用列和行值突出显示/着色表 td？

Question

In my MVC project, i have the following screen shot.
![enter image description here][1]



Output will be like this..
![enter image description here][2]
    ![enter image description here][1]




  <table id="dealer" border="1" width="150%" height="20%" class="TabAlign">
                    <tr style="background-color: #808080; color: #fff; font-size: 14px;height: 30px;">
                        <th class="center_Align">Manufacturer</th>
                        <th class="center_Align">GLI</th>
                        <th class="center_Align">Latham</th>
                        <th class="center_Align">Loop-Loc</th>
                        <th class="center_Align">Merlin</th>
                    </tr>

                    <tr style="height: 30px;">
                        <td>
                            <label for="20mil">&nbsp;&nbsp;20 MIL</label>
                            <input style="display: none;" type="text" name="20mil" value="20 Mil" id="20mil" />
                        </td>
                        <td class="right_Align">
                            @*<label for="20milgli">$@Model.Tot_20mil_GLI.ToString("0.00")</label>*@
                            <div id="20milgli">$@Model.Tot_20mil_GLI.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="20milgli" value="$@Model.Tot_20mil_GLI.ToString("0.00")" id="20milgli" />
                        </td>
                        <td class="right_Align">
                            @*<label for="20milLat">$@Model.Tot_20mil_Lat.ToString("0.00")</label>*@
                            <div id="20milLat">$@Model.Tot_20mil_Lat.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="20milLat" value="$@Model.Tot_20mil_Lat.ToString("0.00")" id="20milLat" />

                        </td>
                        <td class="right_Align">
                            @*<label for="20milLoop">$@Model.Tot_20mil_Loop.ToString("0.00")</label>*@
                            <div id="20milLoop">$@Model.Tot_20mil_Loop.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="20milLoop" value="$@Model.Tot_20mil_Loop.ToString("0.00")" id="20milLoop" />
                        </td>
                        <td class="right_Align">
                            @*<label for="20milMer">$@Model.Tot_20mil_Mer.ToString("0.00")</label>*@
                            <div id="20milMer">$@Model.Tot_20mil_Mer.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="20milMer" value="$@Model.Tot_20mil_Mer.ToString("0.00")" id="20milMer" />
                        </td>
                    </tr>
                    <tr style="height: 30px;">
                        <td>
                            <label for="2728MIL">&nbsp;&nbsp;27/28 MIL</label>
                            <input style="display: none;" type="text" name="2728MIL" value="2728MIL" id="2728MIL" />
                        </td>
                        <td class="right_Align">
                            @*<label for="2728MILgli">$@Model.Tot_27or28mil_GLI.ToString("0.00")</label>*@
                            <div id="2728MILgli">$@Model.Tot_27or28mil_GLI.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="2728MILgli" value="$@Model.Tot_27or28mil_GLI.ToString("0.00")" id="2728MILgli" />
                        </td>
                        <td class="right_Align">
                            @*<label for="2728MILLat">$@Model.Tot_27or28mil_Lat.ToString("0.00")</label>*@
                            <div id="2728MILLat">$@Model.Tot_27or28mil_Lat.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="2728MILLat" value="$@Model.Tot_27or28mil_Lat.ToString("0.00")" id="2728MILLat" />
                        </td>
                        <td class="right_Align">
                            @*<label for="2728MILLoop">$@Model.Tot_27or28mil_Loop.ToString("0.00")</label>*@
                            <div id="2728MILLoop">$@Model.Tot_27or28mil_Loop.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="2728MILLoop" value="$@Model.Tot_27or28mil_Loop.ToString("0.00")" />
                        </td>
                        <td class="right_Align">
                            @*<label for="2728MILMer">$@Model.Tot_20mil_Lat.ToString("0.00")</label>*@
                            <div id="2728MILMer">$@Model.Tot_20mil_Lat.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="2728MILMer" value="$@Model.Tot_20mil_Lat.ToString("0.00")" id="2728MILMer" />
                        </td>
                    </tr>
                    <tr style="height: 30px;">
                        <td>
                            <label for="All27or28MIL">&nbsp;&nbsp;ALL 27 or 28 MIL</label>
                            <input style="display: none;" type="text" name="All27or28MIL" value="All27or28MIL" id="All27or28MIL" />
                        </td>
                        <td class="right_Align">
                            @*<label for="All2728mil">$@Model.Tot_27or28mil_GLI.ToString("0.00")</label>*@
                            <div id="All2728mil">$@Model.Tot_All2728mil_GLI.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="All2728mil" value="$@Model.Tot_All2728mil_GLI.ToString("0.00")" id="All2728mil" />
                        </td>
                        <td class="right_Align">
                            @*<label for="All2728MILLat">$@Model.Tot_All2728mil_Lat.ToString("0.00")</label>*@
                            <div id="All2728MILLat">$@Model.Tot_All2728mil_Lat.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="All2728MILLat" value="$@Model.Tot_All2728mil_Lat.ToString("0.00")" id="All2728MILLat" />
                        </td>
                        <td class="right_Align">
                            @*<label for="All2728MILLoop">$@Model.Tot_All2728mil_Loop.ToString("0.00")</label>*@
                            <div id="All2728MILLoop">$@Model.Tot_All2728mil_Loop.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="All2728MILLoop" value="$@Model.Tot_All2728mil_Loop.ToString("0.00")" id="All2728MILLoop" />
                        </td>
                        <td class="right_Align">
                            @*<label for="All2728MILMer">$@Model.Tot_All2728mil_Mer.ToString("0.00")</label>*@
                            <div id="All2728MILMer">$@Model.Tot_All2728mil_Mer.ToString("0.00")&nbsp;&nbsp;</div>
                            <input style=" display:none;" type="text" name="All2728MILMer" value="$@Model.Tot_All2728mil_Mer.ToString("0.00")" id="All2728MILMer" />
                        </td>
                    </tr>
                </table>
<br />
                <b>Choose Manufacturer</b>
                @if (Model.ChManufacturer.Count() > 0)
                {
                    <table id="tblRadios">
                        <tr>
                            @* <td>@Html.DropDownList("manufacturer", Model.ChManufacturer, new { id = "manufacturer" })</td>*@

                            @foreach (var item in Model.ChManufacturer)
                            {
                                if (item.Text == "Select ...")
                                {
                                }
                                else
                                {
                                <td align="left">
                                    <td>
                                        <input id="manufacturer:@item.Text" type="radio" name="Manu_rbgrp" value="@item.Text" onclick="GetPatternDetails(this.value);">&nbsp;@item.Text </td>
                                    @*<td>@Html.RadioButton("ListTypes", item.Text, new { @class = "radbtn" })</td>*@
                                    @* <td>
                                        <div class="listtext">@item.Text</div>
                                    </td>*@
                                </td>
                                }
                            }
                        </tr>
                    </table>
                }

                <b>Choose Material</b>
                @if (Model.ChMaterial.Count() > 0)
                {
                    <table>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            @foreach (var item in Model.ChMaterial)
                            {
                                if (item.Text == "Select ...")
                                {
                                }
                                else
                                {
                                <td align="left">
                                    <td>
                                        <input id="material:@item.Text" type="radio" name="Mat_rbgrp" value="@item.Text" onclick="GetMaterialName(this.value);">&nbsp;@item.Text </td>
                                </td>
                                }
                            }

                            @*  @for (int i = 0; i < Model.ChMaterial.Count(); i++)
                            {

                                if (@Model.ChMaterial[i].Text == "Select ...")
                                {
                                }
                                else
                                {
                                <td>&nbsp;&nbsp;&nbsp;<input id="rads2:@Model.ChMaterial[i].Text" type="radio" name="Mat_rbgrp" value="@Model.ChManufacturer[i].Text">&nbsp;&nbsp;@Model.ChMaterial[i].Text
                                </td>
                                }
                            }*@
                            @*<td>@Html.DropDownList("material", Model.ChMaterial, new { id = "material" })</td>*@
                        </tr>
                    </table>
                }

我将 Radiobutton 用于制造商，如（20mil、2728mil 等）和材料（GLI、latham、Loop-Loc 等）。所以如果我选择制造商为 20mil，材料为 Latham 意味着 td($2562.38) 将被突出显示。怎么做..有什么帮助吗？

Answer 1

您应该首先找到行和列索引，然后根据 indexex 更改 find that td

试试这个小提琴

  findtdByIndex(row,column)

上面的函数通过它的索引返回 td。您可以在下面的小提琴中找到此功能。

http://jsfiddle.net/Pss9M/72/

Answer 2

$("#tablica tbody tr").each(function() {
   $(this).children('td:first').click(function() {
      $(this).closest('table').find('td').css({
        'background-color':''
      });
     $(this).closest('tr').find("td:nth-child(3)").css({
       'background-color':'red'
    });
  });  
});

在这里提琴