jQuery在点击时在行下方添加文本（在整个表格宽度上） [英] jQuery add text (on entire table width) below row when it was clicked

问题描述

我想在行被点击时在行下添加一些非常大的文本，这样它的宽度就是整行宽度。现在它只在行的第一列之下。

HTML：

 < table id =accordionclass =table> 
< tr> 
< td> Jill< / td> 
< td> Smith< / td> 
< td> 50< / td> 
< / tr> 
< tr> 
< td> Eve< / td> 
< td>杰克逊< / td> 
< td> 94< / td> 
< / tr> 
< tr> 
< td> Jill< / td> 
< td> Smith< / td> 
< td> 50< / td> 
< / tr> 
< / table> 
  

JavaScript：

 < script> （click，function（e）{
 $（this）.after（< p> SOME）非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常text！< / p>）; 
}）; 
< / script> 
  

解决方案

也许这样？我只是用列跨度

（$）（tr）。on（click，function（e）{$（this）.after（） < TR>< TD列跨度= 3>< p为H.！一些非常非常非常非常非常非常非常非常非常非常长的文字< / p>< / TD>< / TR> 中）;}） ;

 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< table id =accordionclass =table> < TR> < TD>吉尔< / TD> < TD> Smith和LT; / TD> < TD> 50℃; / TD> < / TR> < TR> < TD>前夕< / TD> < TD>杰克逊< / TD> < TD> 94℃; / TD> < / TR> < TR> < TD>吉尔< / TD> < TD> Smith和LT; / TD> < TD> 50℃; / TD> < / table>  

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:

<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>

JavaScript:

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

解决方案

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>

这篇关于jQuery在点击时在行下方添加文本（在整个表格宽度上）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！