Add div just below the td.button that called it-CodePudding

I have a table with some information, one of the columns has a button that when clicking displays a div, I need this div to be displayed below the td.button that invoked it

https://jsfiddle.net/L4jh0rsw/23/

I would like to use Jquery and/or JavaScript for the resolution

<html>
<table border="1">
<tr>
  <th>Button</th>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
</tr>
<tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr>
</table>
</html>

<br>

<div id="div" style="display: none">
  information about that rowxcolumn
</div>

$(".class").on("click", function(){ 

    $("#div").show();   
  
});

CodePudding user response：

You can use this below snippet to append the info of clicked row & column, below the button.

//Use this keyword to get the info of selected row or column

$(".class").on("click", function(e){ 
var colAndRowInfo = ($(this).closest("tr").find("td").text()) //modify logic to get info
var info = document.createElement("div");
info.innerHTML = colAndRowInfo;
e.target.value = e.target.appendChild(info);
});

CodePudding user response：

You can access the element in the click handler and then append a new element to it.

Check out the modified version of your jsfiddle here, note that I added a dedicated <button>: https://jsfiddle.net/alexgru/vfr28byk/13/

$("button").on("click", function(e){ 
  let div = document.createElement("div")
  div.textContent = 'Clicked'
  e.target.parentNode.appendChild(div);
});