HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

テーブルに行を追加・削除・行の内容を編集するサンプル

ボタン操作でテーブルに行を追加・削除・編集、そして内容を送信します。

「追加」ボタンで行を追加
「編集」ボタンで行に値を入力または編集
「確定」編集内容を確定
「削除」ボタンで行を削除
「送信」フォームの内容を送信
				

「削除」で行を削除した時に、番号および各行の要素の属性の連番を振り直しています。
「送信」ボタンを押しても何も送信されません。
URLのパラメータで送信する内容が確認できます。

メモ:
IEである行を削除した後、他の行の「編集」ボタンをクリックすると、予期せぬ行を編集モードする場合があります。 この場合の回避策は、<input class="inpval" ...> の "id" と "name" の値を別にすると期待通りに動きます。 将来のバージョンのIEでこの不具合が修正されているかを検証するため、このサンプルには回避策を適用していません。

新しい行を追加:
番号 入力文字
1

コード


/*
 * appendRow: テーブルに行を追加
 */
function appendRow()
{
    var objTBL = document.getElementById("tbl");
    if (!objTBL)
        return;
    
    var count = objTBL.rows.length;
    
    // 最終行に新しい行を追加
    var row = objTBL.insertRow(count);

    // 列の追加
    var c1 = row.insertCell(0);
    var c2 = row.insertCell(1);
    var c3 = row.insertCell(2);
    var c4 = row.insertCell(3);

    // 各列にスタイルを設定
    c1.style.cssText = "text-align:right; width:40px;";
    c2.style.cssText = "";
    c3.style.cssText = "background-color: green; width:40px;";
    c4.style.cssText = "background-color: red; width:40px;";
    
    // 各列に表示内容を設定
    c1.innerHTML = '<span class="seqno">' + count + '</span>';
    c2.innerHTML = '<input class="inpval" type="text"   id="txt' + count + '" name="txt' + count + '" value="" size="30" style="border:1px solid #888;">';
    c3.innerHTML = '<input class="edtbtn" type="button" id="edtBtn' + count + '" value="確定" onclick="editRow(this)">';
    c4.innerHTML = '<input class="delbtn" type="button" id="delBtn' + count + '" value="削除" onclick="deleteRow(this)">';
    
    // 追加した行の入力フィールドへフォーカスを設定
    var objInp = document.getElementById("txt" + count);
    if (objInp)
        objInp.focus();
}

/*
 * deleteRow: 削除ボタン該当行を削除
 */
function deleteRow(obj)
{
    // 確認
    if (!confirm("この行を削除しますか?"))
        return;

    if (!obj)
        return;

    var objTR = obj.parentNode.parentNode;
    var objTBL = objTR.parentNode;
    
    if (objTBL)
        objTBL.deleteRow(objTR.sectionRowIndex);
    
    // <span> 行番号ふり直し
    var tagElements = document.getElementsByTagName("span");
    if (!tagElements)
        return false;

    var seq = 1;
    for (var i = 0; i < tagElements.length; i++)
    {
        if (tagElements[i].className.match("seqno"))
            tagElements[i].innerHTML = seq++;
    }

    // id/name ふり直し
    var tagElements = document.getElementsByTagName("input");
    if (!tagElements)
        return false;

    // <input type="text" id="txtN">
    var seq = 1;
    for (var i = 0; i < tagElements.length; i++)
    {
        if (tagElements[i].className.match("inpval"))
        {
            tagElements[i].setAttribute("id", "txt" + seq);
            tagElements[i].setAttribute("name", "txt" + seq);
            ++seq;
        }
    }

    // <input type="button" id="edtBtnN">
    seq = 1;
    for (var i = 0; i < tagElements.length; i++)
    {
        if (tagElements[i].className.match("edtbtn"))
        {
            tagElements[i].setAttribute("id", "edtBtn" + seq);
            ++seq;
        }
    }

    // <input type="button" id="delBtnN">
    seq = 1;
    for (var i = 0; i < tagElements.length; i++)
    {
        if (tagElements[i].className.match("delbtn"))
        {
            tagElements[i].setAttribute("id", "delBtn" + seq);
            ++seq;
        }
    }
}

/*
 * editRow: 編集ボタン該当行の内容を入力・編集またモード切り替え
 */
function editRow(obj)
{
    var objTR = obj.parentNode.parentNode;
    var rowId = objTR.sectionRowIndex;
    var objInp = document.getElementById("txt" + rowId);
    var objBtn = document.getElementById("edtBtn" + rowId);

    if (!objInp || !objBtn)
        return;
    
    // モードの切り替えはボタンの値で判定   
    if (objBtn.value == "編集")
    {
        objInp.style.cssText = "border:1px solid #888;"
        objInp.readOnly = false;
        objInp.focus();
        objBtn.value = "確定";
    }
    else
    {
        objInp.style.cssText = "border:none;"
        objInp.readOnly = true;
        objBtn.value = "編集";
    }
}
	

HTMLコード


<form id="frm" name="frm" method="GET" action="">
    <div>新しい行を追加:<input type="button" id="add" name="add" value="追加" onclick="appendRow()"></div>
    <table border="1" id="tbl">
    <tr>
        <th style="text-align:right; width:40px;">番号</th>
        <th style="">入力文字</th>
        <th style="background-color: green; width:40px;"> </th>
        <th style="background-color: red; width:40px;"> </th>
    </tr>
    <tr>
        <td style="text-align:right; width:40px;"><span class="seqno">1</span></td>
        <td style=""><input class="inpval" type="text" id="txt1" name="txt1" value="blah blah blah" size="30" readonly style="border:none"></td>
        <td style="background-color: green; width:40px;"><input class="edtbtn" type="button" id="edtBtn1" value="編集" onclick="editRow(this)"></td>
        <td style="background-color: red; width:40px;"><input class="delbtn" type="button" id="delBtn1" value="削除" onclick="deleteRow(this)"></td>
    </tr>
    </table>
    <input type="submit" value="送信">
</form>
	

関連リンク