Clever Geek Handbook

How to add a border around a row in a table

I have a table that has fields on each row. If the field is empty, I want a specific line with a red border around it.

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

i jst wants the script, assuming the last name is empty, it should add some css around that particular table row that the last name appears.

+3


source to share


2 answers


How about something like this:

$(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/



Here's a version that works without "Normalized CSS" but cell-spacing

had to be removed:

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

+4


source


You could do

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


EDIT - I fixed it to work with inputs

0


source






More articles:


All Articles