根据选择高亮显示单元格边框(活动单元格)

Highligh Cell Border according to selection (Active cell)

本文关键字：单元格 边框 活动 显示 选择 高亮      更新时间：2023-09-26

我只是有一个简单的HTML表格，我需要突出显示选中的单元格。

<table with='100%'>
<tr>
    <td> 
    <input type="radio" name="x" value="1" id="x1">
    <label for="x1"><A></label>
    </td>
<td> 
    <input type="radio" name="x" value="2" id="x2">
    <label for="x2"><B></label>
    </td>
<td > 
    <input type="radio" name="x" value="3" id="x3">
    <label for="x3"><C></label>
    </td>
</tr>

<tr>
    <td> 
    <input type="radio" name="x" value="1" id="x4">
    <label for="x4"><D></label>
    </td>

<td> 
    <input type="radio" name="x" value="2" id="x5">
    <label for="x5"><E></label>
    </td>

<td > 
    <input type="radio" name="x" value="3" id="x6">
    <label for="x6"><F></label>
    </td>
</tr>
</table>

CSS:道明。Rata {border: 5px solid #ccc;填充:3 px} 

$('td').click(function () {
  $('this').toggleClass("rata");
});

要求如下:如果用户选择单元格"A"，则在A上显示轮廓(边框)，如果用户选择单元格"B"，则在"B"上显示轮廓(边框)，并从单元格"A"中移除，依此类推…

谢谢

$('table tr td label').click(function(){
$('.border').removeClass('border');
$(this).parent('td').addClass('border');
});

CSS:.border{边框:1px实红色;} 

 $('td').click(function () {
    $('td').removeClass("rata");
    $(this).addClass("rata");
 });
相关文章：