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

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>");
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="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>");
});

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>

Share