简体   繁体   中英

How to get checked checkbox value to another table?

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM