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

Question

勾选复选框我要扩展表格行，并使用标签和输入标签询问其他信息。但这是直线，我希望在新行中。 下面就是一个例子。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

我在取消选中时也删除了新行

＆＃13;
＆＃13;
$(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'/>" : "");
  });
});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;