JQuery Add Text (on Entire Table Width) Below Row When It Was Clicked

Question

I want to add some very large text below the row when row was clicked, so that it's width would be entire row width. Now it is only below first column of the row. HTML:

Solution 1:

You could create another row and set its colspan to 3

Solution 2:

Perhaps something like this? I just used colspan

$("tr").on("click", function(e) {
  $(this).after("<tr><td colspan=3><p>SOME very very  very very  very very  very very  very very  long text!</p></td></tr>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="accordion" class="table">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

Solution 3:

Try this

<script>
$('#accordion').on("click", 'tr', function(e) {
    $(this).next('tr').text("<td></td><td>SOME very very  very very  very very  very very  very very  long text!</td><td></td>");
});

Baca Juga

Solution 4:

You need to create <tr><td> elements to append in your table. And to occupy the 100% of the table you need to use colspan

$("tr").on("click", function(e) {
        $(this).after($('<tr />').html($('<td colspan="3"/>').html('A very long  text')));
    });

Solution 5:

Should work but the the more text you add the more width will be added to your table stretching the columns.

  <script>
    $("tr").on("click", function(e) {
        $(this).after("<tr><td colspan='3'>SOME very very  very very  very very  very very  very very  long text!</td></tr>");
    });
  </script>

Free Interactive Html5 Tutorial