根据选择突出显示细胞边界(Activecell)

时间:2013-06-16 17:00:18

标签: javascript jquery html css

我只有一个简单的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:     td.rata {border:5px solid #ccc;填充:3px}

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

要求如下:如果用户选择单元格“A”,则轮廓(边框)将显示在A上,如果用户选择单元格“B”,则轮廓(边框)将显示在“B”上并从单元格“A”中删除,依此类推......

由于

2 个答案:

答案 0 :(得分:0)

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

CSS:     。边界     {    边框:1px纯红色; }

答案 1 :(得分:0)

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