is it possible to get the checked chackbox value to another table? After I select the user I want, then it will appear in the table next to it. My current JS code look "weird" and I don't seem to get it done. :(
Much appreciated your help, and Thanks in advanced.
Peter
=== JS ===
$("input[type='checkbox']").val();
$('input[type="checkbox"]:checked').each(function() {
var user = $(this).closest("tr").find("td:nth-child(2)").text();
document.getElementById("user-list").innerHTML = user ;
});
});
=== (Users List)===
<table>
<tr>
<th>No</th>
<th>Name</th>
<th>ID</th>
<th>Action</th>
</tr>
<tr id="user-list">
<td>1</td>
<td>Peter</td>
<td>1234</td>
<td><input type="checkbox" value="Peter" ></td>
</tr>
<tr>
<td>2</td>
<td>Adam</td>
<td>643</td>
<td><input type="checkbox" value="Adam" ></td>
</tr>
</table>
=== (Selected User) ===
<table>
<tr>
<th>No</th>
<th>Name</th>
</tr>
<tr>
<th>1</th>
<th>Adam</th>
</tr>
</table>
User List
| No | Name | ID | Action |
|----|------|----|--------|
|1 |Peter |123 | [ ] |
|2 |Adam |643 | [/] |
Selected User
| No | Name |
|----|------|
|1 |Adam |
I give you a sample code for your reference:
function addUser(vv){ if (vv.checked){ let row=$(vv).parents("tr")[0]; let selectedUserTable=document.getElementById("selectedUser"); let selectedUserRow=selectedUserTable.insertRow(selectedUserTable.rows.length); let cell=selectedUserRow.insertCell(selectedUserRow.cells.length); cell.textContent=row.cells[0].textContent; cell=selectedUserRow.insertCell(selectedUserRow.cells.length); cell.textContent=row.cells[1].textContent; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th>No</th> <th>Name</th> <th>ID</th> <th>Action</th> </tr> <tr id="user-list"> <td>1</td> <td>Peter</td> <td>1234</td> <td><input type="checkbox" value="Peter" onchange="addUser(this)"></td> </tr> <tr> <td>2</td> <td>Adam</td> <td>643</td> <td><input type="checkbox" value="Adam" onchange="addUser(this)"></td> </tr> </table> <table id="selectedUser"> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.