【javascript】or【jquery】で指定した場所に行を追加したい

Question

テーブルの最終行や先頭には追加出来るんですが、テーブルの2行目の下に追加していきたいんですがでやり方がわかりません

<?php echo $this->Form->create('post', array('type' => 'file', 'url' => 'admin_add')); ?>
<table>
  <tr>
    <th> タイトル</th>
    <td><?php echo $this->Form->input('title', array('label' => false, 'div' => false)); ?></td>
  </tr>

  <tr>
    <th> 画像</th>
    <td id="sample1_table">
      <?php echo $this->Form->input('Post.0.photo', array('type' => 'file', 'label' => false)); ?>
      <?php echo $this->Form->input('Post.0.photo_dir', array('type' => 'hidden')); ?>
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="行追加" onclick="insertRow('sample1_table')" />
    </td>
  </tr>

//ここに追加していきたい

  <tr>
    <th> 本文</th>
    <td><?php echo $this->Form->input('posttext', array('type' => 'text', 'label' => false, 'div' => false)); ?></td>
  </tr>
</table>
<?php echo $this->Form->end('Submit'); ?>

<script> /** * 行追加 */ function insertRow(id) { // テーブル取得 var table = document.getElementById(id); // 行を行末に追加 var row = table.insertRow(-1); // セルの挿入 var cell1 = row.insertCell(-1); var cell2 = row.insertCell(-1); // ボタン用 HTML var button = '<input type="button" value="行削除" onclick="deleteRow(this)" />'; // 行数取得 var row_len = table.rows.length; // セルの内容入力 cell1.innerHTML = '追加ボタン'; cell2.innerHTML = '<?php echo $this->Form->input('Post.0.photo_dir', array('type' => 'hidden')); ?><?php echo $this->Form->input('Post.0.photo', array('type' => 'file', 'label' => false)); ?>' + button; } /** * 行削除 */ function deleteRow(obj) { // 削除ボタンを押下された行を取得 tr = obj.parentNode.parentNode; // trのインデックスを取得して行を削除する tr.parentNode.deleteRow(tr.sectionRowIndex); } </script>

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

Answer 1

$('table > tr').eq(2).after('<tr><td>hogehoge</td></tr>');

こんな感じでどうでしょうか。
ただ、te2jiさんのおっしゃる通り、IDなりクラスを振ったほうがいいかと思います。
また、table内のtrをtheadとtbodyである程度括ったほうが、位置の指定も楽かと思います。

Answer 2

<tr id='rowAnchor'>
  <td>
    <input type="button" value="行追加" onclick="insertRow('sample1_table')" />
  </td>
</tr>

html部をこのようにする前提で考えると、javascriptの方でこんな風にしてやればよいのでは。

var tr = $('<tr />');
var td = $('<td />');
tr.append(td);
$('#rowAnchor').after(tr[0]);

Answer 3

印をつければイイのでは？idを振るとか。

Comments

[AtsushiNakamura]

id = sample1_tableを追加したい行に振ったんですが・・・

[退会済みユーザー]

追加したいところにidを振ったなら、そこに挿入してあげればいいですよ。