テーブルの末尾に要素を追加したい時、以下のようにjQueryのappendを利用すればいい。 appendの引数を複数にして、複数の要素を追加することもできるが、今回のように
引数を複数とったら順番に後ろに追加されていきます。
<div class="day-calendar"> <table> <tr> <th></th> <th></th> </tr> <tr> <th></th> <th></th> </tr> <tr> <th></th> <th></th> </tr> //これを追加したい // <tr> // <th class="day-left">電話番号</th> // <td class="day-right"><input placeholder="半角・ハイフン無し"></td> // </tr> </table> </div>
テーブルが複数ある場合は、その親要素のクラスなどを参照してとります。
function teltel(){ var day_calendar = document.getElementsByClassName("day-calendar"); var table = $(day_calendar).children('table') ; $(table).append('<tr><th class="day-left">電話番号</th><td class="day-right"><input></td></tr>') ; }