Table Next Row

Handle next row of table through javascript event.

by Anand Jee

HTML

<h1>Table Next Row</h1>

<hr>
<table id="tbl">
    <tr>
        <td><input type="text"/></td>
        <td><a href="javascript:void(0);" class="_check">Click Me</a></td>
    </tr>
    <tr class="vRow">
        <td colspan="2"><span class="vMsg"></span></td>
    </tr>
    <tr>
        <td><input type="text"/></td>
        <td><a href="javascript:void(0);" class="_check">Click Me</a></td>
    </tr>
    <tr class="vRow">
        <td colspan="2"><span class="vMsg"></span></td>
    </tr>
    <tr>
        <td><input type="text"/></td>
        <td><a href="javascript:void(0);" class="_check">Click Me</a></td>
    </tr>
    <tr class="vRow">
        <td colspan="2"><span class="vMsg"></span></td>
    </tr>
</table>

CSS

body{font-family: calibri;font-size: 12px;}
table {border-collapse: collapse;font-family: calibri;font-size: 12px;}
table tr td,table tr th {padding: 4px 10px;border: 1px solid #D5D5D5;}
h1{text-align:center;font-size:15px;}
a{text-decoration:none;color:#000;}
a:hover{color:#FF0000;}

JavaScript

//Table Next Row   
$('.vRow').hide();
    $("#tbl tr td ._check").click(function () {
        var _getInputValue = Number($(this).closest("tr").children("td:eq(0)").find("input").val());
        if(_getInputValue==0){
            $(this).closest('tr').next('.vRow').show();
           $(".vMsg").text("input field can't empty"); 
        }
        else{
            $(this).closest('tr').next('.vRow').hide();
           $(".vMsg").text("");
        }
    });