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

Question

单击复选框时，我想展开表行，并使用标签询问其他信息，并在直线上输入tag.But，我想在新行中输入此信息。下面是示例。

​

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. 您的

is invalid HTML

• use jQuery now you

it

• xxxexpand放在新行/单元格中，而不是同一行中的单元格

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

​