2017-10-02 14 views
0

私はJQueryが新しく、既存のテーブルに行を追加しようとしています。JQueryを使用してhtmlテーブルにテーブル行を追加する方法

  1. コードの何が間違っていますか?

  2. 列の値を指定せずに空の行を挿入するにはどうすればよいですか?

  3. これを行うより良い方法はありますか?どうやって?

$(document).ready(function() { \t \t \t 
 
\t \t \t var tbl = $('#mytable'); 
 
\t \t \t appendTableRow(tbl) 
 
\t \t }); 
 
\t \t 
 
\t \t function appendTableRow(table) { \t \t \t  
 
\t \t \t var newrow = ''; 
 

 
\t \t \t newrow += "<tr>"; 
 
\t \t \t newrow += "<td>21</td>"; 
 
\t \t \t newrow += "<td>22</td>"; 
 
\t \t \t newrow += "</tr>"; 
 
\t \t \t \t \t \t 
 
\t \t \t table.find('tbody tr:last').append(newrow);  
 
\t \t }
table { 
 
\t \t border-collapse: collapse; 
 
\t } 
 

 
\t table td { 
 
\t \t border: 1px solid black; 
 
\t } 
 
    
 
    table th { 
 
\t \t border: 1px solid black; 
 
\t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
\t <thead> 
 
\t \t <th>Col1</th> 
 
\t \t <th>Col2</th> 
 
\t </thead> 
 
\t 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t <td>11</td> 
 
\t \t <td>12</td> 
 
\t \t </tr> 
 
\t </tbody> 
 
\t </table>

+2

は、テーブルの行に追加するので、**しない** 'table.find( '最後のtbody trの')をしないでください。 '、しかしテーブル本体には' table.find( 'tbody')。append(newrow); '。 – skobaljic

+1

[jQueryを使用してテーブルに行を追加するにはどうすればよいですか?](https://stackoverflow.com/questions/2160890/how-do-you-append-rows-to-a-table-using-jquery) – krishnar

答えて

0

コードは問題ありません。 tbodyに追加するだけです。 (newrow)追記;:

$(document).ready(function() { \t \t \t 
 
\t \t \t var tbl = $('#mytable'); 
 
\t \t \t appendTableRow(tbl) 
 
\t \t }); 
 
\t \t 
 
\t \t function appendTableRow(table) { \t \t \t  
 
\t \t \t var newrow = ''; 
 

 
\t \t \t newrow += "<tr>"; 
 
\t \t \t newrow += "<td>21</td>"; 
 
\t \t \t newrow += "<td>22</td>"; 
 
\t \t \t newrow += "</tr>"; 
 
\t \t \t \t \t \t 
 
\t \t \t $('tbody').append(newrow);  
 
\t \t }
table { 
 
\t \t border-collapse: collapse; 
 
\t } 
 

 
\t table td { 
 
\t \t border: 1px solid black; 
 
\t } 
 
    
 
    table th { 
 
\t \t border: 1px solid black; 
 
\t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
\t <thead> 
 
\t \t <th>Col1</th> 
 
\t \t <th>Col2</th> 
 
\t </thead> 
 
\t 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t <td>11</td> 
 
\t \t <td>12</td> 
 
\t \t </tr> 
 
\t </tbody> 
 
\t </table>

0

1)何も間違っではありません、行うには書かれて何をしています。プログラム的に、うまくいきます。

代わりnewrow += "<td>21</td>";使用newrow += "<td> </td>";

2)(私はほとんどこれはトリックの質問であると感じ)?

3)これを行うより良い方法はありますか?どうやって?

^これらのタイプの質問はここでは話題になりません。

+0

これはトリック質問ではありませんでした!コードを実行すると、新しい行が作成されていないことがわかります。作成された2つのセルは、第1行の横に結合されていました。 –

関連する問題