如何在表格中添加行周围的边框

时间:2012-03-15 11:14:30

标签: jquery

我有一张表,每行都有字段。如果字段为空,我希望特定的行周围有红色边框。

<table cellpadding="3" cellspacing="5" >
<tr>
<td class="cellformatting"><label>first name*</label></td>
<td class="cellformatting"><input id="fname" type="text" class="required searchfields" />
</td>
</tr>
<tr>
 <td class="cellformatting"><label>last name*</label></td>
<td class="cellformatting"><input id="lname" type="text" class="searchfields" /></td>
</tr>
</table>

我想要脚本如果假设姓氏是空的,它应该在显示姓氏的表的特定行周围添加一些css。

2 个答案:

答案 0 :(得分:5)

这样的事情怎么样:

$(function(){

    checkBorder();

    $("table tr input").change(function(){
       checkBorder(); 
    });

});
function checkBorder(){
 $("table tr").each(function(){
    if ($(this).find("input").val() == ""){
       $(this).attr("class", "border");   
    }
});   
}
​

http://jsfiddle.net/kh6q8/


这是一个没有“规范化CSS”的版本,但必须删除cell-spacing

http://jsfiddle.net/kh6q8/2/

答案 1 :(得分:0)

你可以做到

function check_empty(){
    $("td input").each(function(){
      if(this.value === ''){
         $(this).closest('tr').css('border', '1px solid red');
      }
    });
}

编辑 - 我更正了它以使用输入