在jQuery中追加表格标题

它的追加，但它插入一个休息和追加在下一行。如何克服这一点？

Plz help。提前致谢。检查我的代码如下

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<body> 
<table id="test"> 
    <thead> 
    <th> Column 1</th> 
    <th> Column 2</th> 
    <th> Column 3</th> 
    </thead>  
    </table> 
    <button> Click Me</button> 
    <script> 
    $('#test >thead').append('<th> Column 4</th>'); 
    </script> 
</body> 
</html>

来源

2017-06-16 srinivasan

之所以代码不工作： -

如果你看看渲染HTML你定的代码浏览器控制台上的那么你会得到<tr></tr>是自动引入 arround <th></th>这就是为什么jQuery在换行符中追加<th> Column 4</th>。 （有些不够聪明的浏览器都做了自动进行HTML的结构是正确的）

你需要下面不喜欢（在你的HTML添加tr自己和改变的jQuery）： -

$('#test >thead tr').append('<th> Column 4</th>');

工作例如： -

$('#test >thead tr').append('<th> Column 4</th>');

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <table id="test"> <thead> <tr> <th> Column 1</th> <th> Column 2</th> <th> Column 3</th> </tr> </thead> </table> <button> Click Me</button> </body> </html>

来源

2017-06-16 04:37:23

你缺少你的HTML的TR。 –

@JenniferGoncalves IT'S BROWSER自动将它们引入OP的代码。我仍然在我的理由部分 –

现在这是正确的。 –

1）缺少tr在thead中。

2）您试图在thead中添加$('#test >thead')。但在浏览器中，您可以看到有一个tr包围了您的列名称，因此它将附加在tr之外。所以你需要追加这样$('#test >thead tr').append('<th> Column 4</th>');

$('#test >thead tr').append('<th> Column 4</th>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<table id="test"> 
 
    <thead> 
 
    <tr> 
 
    <th> Column 1</th> 
 
    <th> Column 2</th> 
 
    <th> Column 3</th> 
 
    </tr> 
 
    </thead>  
 
    </table> 
 
    <button> Click Me</button> 
 
    
 
</body> 
 
</html>

来源

2017-06-16 04:37:49 JYoThI

为什么downvote可能我知道原因 – JYoThI

这是更正确的，因为它不缺少HTML中的tr。 –

$('#test > thead tr').append('<th> Column 4</th>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="test"> 
 
    <thead> 
 
    <tr> 
 
    <th> Column 1</th> 
 
    <th> Column 2</th> 
 
    <th> Column 3</th> 
 
    </tr> 
 
    </thead> 
 
</table> 
 
<button> Click Me</button>

需要一个tr

来源

2017-06-16 04:38:29 guradio

投票好心解释？ – guradio

真的吗？是不是像2分钟我回答同一时间，你确实有你这样的时间，这不值得投票。这是自以为是的投票 – guradio

这是更正确的，因为它不缺少HTML中的tr。 –

该代码也将有助于

<table id="test"> 
    <thead> 
     //<tr> tag added which is missing in your code 
     <tr> 
      <th> Column 1</th> 
      <th> Column 2</th> 
      <th> Column 3</th> 
     </tr> 
    </thead> 
</table> 
<button> Click Me</button>

//below is the code inside <script></script> 
<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script> 
    $('#test').find('thead tr').append('<th> Column 4</th>'); 
</script>

来源

2017-06-16 05:18:55 Divya

它会附加表中的所有tr。他只需要追加在tr> tr中@Divya – JYoThI

谢谢，我更新了代码。 – Divya

在jQuery中追加表格标题

回答

相关问题