열과 행 값을 사용하여 표를 강조/채색하는 방법은 무엇입니까?

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

(20mil, 2728mil 등) 및 소재 (GLI, latham, Loop-Loc 등)와 같은 Radiobutton을 사용합니다. 따라서 제조사를 20mil로 선택하면 Latham은 td ($ 2562.38)가 강조 표시됩니다. 어떻게 이런 .. 어떤 도움 ??

Answer 1

먼저

findtdByIndex(row,column) 

해당 인덱스에 의해 TD 함수가 반환 위의이 바이올린을 시도 indexex

에 따라 그 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' 
    }); 
    }); 
}); 

Fiddle here