There is

<table border="1"> <tr align="center" bgcolor="#E6E6E6"> <th>ID</th> <th>Icon</th> <th>Object Name</th> <th>Object Type</th> <th>Creation Date</th> </tr> <c:forEach items="${objList}" var="obj"> <tr> <td><label><input type="radio" name="object_id" onclick="setObjectButton(this);" value="${obj.obj_id}" /> ${obj.obj_id}</label></td> <td>${obj.main_type}</td> <td>${obj.obj_name}</td> <td>${obj.obj_type}</td> <td>${obj.creation_date}</td> </tr> </c:forEach> <tr> <td colspan="7"> <table class="buttons" style="width: 100%; text-align: center; border: none !important;"> <tr> <td><input type="submit" value="Edit" name="edit" disabled onclick="page='ObjectList'" /></td> <td><input type="submit" value="delete" name="delete" disabled onclick="page='ObjectDelete'" /></td> <td><input type="submit" value="Create Directory" name="addDir" onclick="page='ObjectList'" /></td> <td><input type="submit" value="Create Document" name="addDoc" onclick="page='ObjectList'" /></td> <td><input type="submit" value="Access" name="access" disabled onclick="page='ObjectList'" /></td> </tr> </table> </td> </tr> </table>

How when choosing a radio button to choose the values ​​of the entire row of the table as separately taken ??

That is, it is necessary for Radiobutton to be bound to $ {obj.main_type} $ {obj.obj_name} and all other values ​​and not just to $ {obj.obj_id}

That is, at the moment, only the value of the ID column is selected, and it is necessary that all values ​​of the columns in one row are selected

enter image description here

  • explain in more detail how it should look like what you want to see in the end, and not by the example of code. - user220409
  • @OlmerDale You need to select a string and not just the ID value - Eugene
  • @OlmerDale updated the question - Eugene
  • You forgive me, absolutely no time. If you have not done it yet, then I want to clarify what it means to get out? Are they highlighted in a different color or was the data collected in the object? - user220409

1 answer 1

If you need to make a line selection, you can do it like this -

 const table = document.querySelector('table'); table.addEventListener('change', table_changeHandler); function table_changeHandler(event) { let tr = table.querySelector('tr[data-active="true"]'); if (tr) { tr.dataset.active = false; } event.target.closest('tr').dataset.active = true; } 
 tr[data-active="true"] td { background: tomato; } 
 <table border="1"> <tr align="center" bgcolor="#E6E6E6"> <th>ID</th> <th>Icon</th> <th>Object Name</th> <th>Object Type</th> <th>Creation Date</th> </tr> <tr data-active="false"> <td><label><input type="radio" name="object_id" value="${obj.obj_id}" />first</label></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr data-active="false"> <td><label><input type="radio" name="object_id" value="${obj.obj_id}" />second</label></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr data-active="false"> <td><label><input type="radio" name="object_id" value="${obj.obj_id}" />third</label></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td colspan="7"> </td> </tr> </table>

If values ​​are needed, then you can

 const table = document.querySelector('table'); table.addEventListener( 'change', table_changeHandler ); function table_changeHandler(event){ let td = event.target.closest('tr').querySelectorAll('td'); parseTableRow( Array.from(td) ); } function parseTableRow(tdAll){ console.log(tdAll); // парсим данные }