单击复选框如何展开表格行？

Question

复选框的Onclick我想扩展表格行，并使用标签和输入标签询问其他信息。但这是直线出现的，我希望在新行出现。 下面是示例。

 function serverVn(obj) { document.getElementById(obj.id + "expand").innerHTML = "<div id='Vn'><label>VNumber:</label><input id='INVn' class='form-control' type='text'/></div>" } 

 <table class="table table-striped"> <thead> <tr> <th></th> <th>firstname</th> <th>lastname</th> <th>dOB</th> <th>age</th> <th>gender</th> </tr> </thead> <tbody> <tr> <td> <input id='use0' type='checkbox' name='chkbox' onchange='serverVN(this)' /> </td> <td>john</td> <td>john</td> <td></td> <td>30</td> <td></td> <br/> <td> <div id='use0expand'></div> </td> </tr> <tr> <td> <input id='use1' type='checkbox' name='chkbox' onchange='serverVN(this)' /> </td> <td>john</td> <td>john</td> <td></td> <td>30</td> <td></td> <br/> <td> <div id='use1expand'></div> </td> </tr> <tr> <td> <input id='use2' type='checkbox' name='chkbox' onchange='serverVN(this)' /> </td> <td></td> <td></td> <td></td> <td>30</td> <td></td> <br/> <td> <div id='use2expand'></div> </td> </tr> <tr> <td> <input id='use3' type='checkbox' name='chkbox' onchange='serverVN(this)' /> </td> <td>john</td> <td>john</td> <td></td> <td>30</td> <br/> <td> <div id='use3expand'></div> </td> </tr> <tr> <td> <input id='use4' type='checkbox' name='chkbox' onchange='serverVN(this)' /> </td> <td>john</td> <td>john</td> <td></td> <td>30</td> <br/> <td> <div id='use4expand'></div> </td> </tr> <tr> <td> <input id='use5' type='checkbox' name='chkbox' onchange='serverVN(this)' /> </td> <td>john</td> <td>john</td> <td></td> <td>30</td> <br/> <td> <div id='use5expand'></div> </td> </tr> </tbody> </table> 

Answer 1

1. JS区分大小写。
2. 你的
   无效的HTML
3. 现在就使用jQuery
4. 将xxxexpand放到新的ROW /单元格中，而不要放在同一行中
5. 也将obj id添加到输入中以创建唯一ID

我删除了div，因为您已经有一个可以使用的单元格

如果未选中，我也会删除新行

 $(function() { $(".sVN").on("click", function() { $("#" + this.id + "expand").html(this.checked ? "<label for='INVn" + this.id + "' >VNumber:</label><input id='INVn" + this.id + "' class='form-control' type='text'/>" : ""); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <table class="table table-striped"> <thead> <tr> <th></th> <th>firstname</th> <th>lastname</th> <th>dOB</th> <th>age</th> <th>gender</th> </tr> </thead> <tbody> <tr> <td> <input id='use0' type='checkbox' name='chkbox' class="sVN" /> </td> <td>john</td> <td>john</td> <td>&nbsp;</td> <td>30</td> <td>&nbsp;</td> </tr> <tr> <td colspan="6" id='use0expand'></td> </tr> <tr> <td> <input id='use1' type='checkbox' name='chkbox' class="sVN" /> </td> <td>john</td> <td>john</td> <td>&nbsp;</td> <td>30</td> <td>&nbsp;</td> </tr> <tr> <td colspan="6" id='use1expand'></td> </tr> <tr> <td> <input id='use2' type='checkbox' name='chkbox' class="sVN" /> </td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>30</td> <td>&nbsp;</td> </tr> <tr> <td colspan="6" id='use2expand'></td> </tr> <tr> <td> <input id='use3' type='checkbox' name='chkbox' class="sVN" /> </td> <td>john</td> <td>john</td> <td>&nbsp;</td> <td>30</td> <td>&nbsp;</td> </tr> <tr> <td colspan="6" id='use3expand'></td> </tr> <tr> <td> <input id='use4' type='checkbox' name='chkbox' class="sVN" /> </td> <td>john</td> <td>john</td> <td>&nbsp;</td> <td>30</td> <td>&nbsp;</td> </tr> <tr> <td colspan="6" id='use4expand'></td> </tr> <tr> <td> <input id='use5' type='checkbox' name='chkbox' class="sVN" /> </td> <td>john</td> <td>john</td> <td>&nbsp;</td> <td>30</td> <td>&nbsp;</td> </tr> <tr> <td colspan="6" id='use5expand'></td> </tr> </tbody> </table>