javascript 行の追加と削除

| コメント(0)

<script type="text/javascript">
var counter = 0;
/** 行追加 */
function insertRow(id) {
    counter++;
    // テーブル取得
    var table = document.getElementById(id);
    // 行を行末に追加
    var row = table.insertRow(-1);
    // セルの挿入
    var cell1 = row.insertCell(-1);
    var cell2 = row.insertCell(-1);
    var cell3 = row.insertCell(-1);
    // ボタン用 HTML
    var button = '<input type="button" value="削" onclick="deleteRow(this)" />';

    // 行数取得
    var row_len = table.rows.length;
    // 現在の行数表示用
    document.getElementById( "Output" ).innerHTML = row_len - 1;

    // セルの内容入力
    var HTML1 = button;
   var HTML2 = '<input type="text" name="address' + counter + '" value="" size="10" maxlength="20" />';
   var HTML3 = '<input type="text" name="tel' + counter + '" value="" size="10" maxlength="20" />';
   cell1.innerHTML = HTML1;
   cell2.innerHTML = HTML2;
   cell3.innerHTML = HTML3;
}
/** 行削除 */
function deleteRow(obj) {
    // 削除ボタンを押下された行を取得
    tr = obj.parentNode.parentNode;
    // trのインデックスを取得して行を削除する
    tr.parentNode.deleteRow(tr.sectionRowIndex);
    // 削除した後の行数取得して表示
    var len = table.rows.length;
    document.getElementById( "Output" ).innerHTML = len - 1;
}
</script>

<span id="Output" style="margin-left: 10px;">1</span>

<input type="button" value="行追加" onclick="insertRow('table')" />

<table id="table">
  <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
  </tr>

    <tr>
        <td><input type="button" value="削" onclick="deleteRow(this)" /></td>
        <td><input type="text" name="address' + 0 + '" value="" size="10" maxlength="20" /></td>
        <td><input type="text" name="tel' + 0 + '" value="" size="10" maxlength="20" /></td>
    </tr>
</table>

コメントする