動的フォームを作る

javascript.js

$(document).ready(function() {
  // CSSで非表示にした1行目の行を複製し、その行の下に挿入
  $("#p2146-2-tbody > tr").clone(true).insertAfter($("#p2146-2-tbody > tr"));
  $('.removeList:eq(1)').css('display',"none");
  // 行を追加する
  $(document).on("click", ".addList", function() {
    $("#p2146-2-tbody > tr").eq(0).clone(true).insertAfter(
      $(this).parent().parent()
    );
  });
  // 行を削除する
  $(document).on("click", ".removeList", function() {
    $(this).parent().parent().empty();
  });
  // 行を一つ下に移動させる
  $(document).on("click", ".downList", function() {
    var t = $(this).parent().parent();
    if($(t).next("tr")) {
      $(t).insertAfter($(t).next("tr")[0]);
    }
  });
  // 行の一部を変更する
  $(document).on("change", ".changeList", function() {
    $(this).parent().next().html($(this).val());
  });
});

form.html

<script type="text/javascript" src="contents/datebase/db_contents/js/new_contents.js"></script>
<table>
<tr><th>データベースの表示方法</th><td>
<select name="db_col" id="db_col">
<option value="1">1列（タイトル/内容）</option>
<option value="2">2列（タイトル/内容/タイトル/内容）</option>
<option value="3">3列（タイトル/内容/タイトル/内容/タイトル/内容）</option>
</select>
        </td></tr>
<!--▼改行しない▼-->
<tbody id="p2146-2-tbody"><tr id="p2146-2-tbody"><th width="120"><input type="text" name="etc1[]" size="25" placeholder="項目名" class="etc1"></th><td><input type="text" name="etc2[]" value="" placeholder="内容" style="width:60%" class="etc2">　<img src="img/down.png" alt="↓" class="downList" /><input value="+" type="button" class="addList" /><input value="-" type="button" class="removeList" /></td></tr></tbody>
<!--▲改行しない▲-->
</table>