HARD DAY'S NIGHT別館

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

テーブルの各行にファイル参照を使用してファイル名を取得するサンプル

テーブルの各行にファイル参照 <input type="file"...> を付加して行の追加・削除を行います。

新しい行を追加:
番号 ファイル
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);

    // 各列にスタイルを設定
    c1.style.cssText = "text-align:right; width:40px;";
    c2.style.cssText = "";
    c3.style.cssText = "width:40px;";
    
    // 各列に表示内容を設定
    c1.innerHTML = '<span class="seqno">' + count + '</span>';
    c2.innerHTML = '<input class="inpval" type="file"   id="file' + count + '" name="filenm' + count + '" value="" size="30" onchange="fileInputChanged(this)">';
    c3.innerHTML = '<input class="delbtn" type="button" id="delBtn' + count + '" value="削除" onclick="deleteRow(this)" style="display:none;">';
    
    // 追加した行の入力フィールドへフォーカスを設定
    var objInp = document.getElementById("file" + 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="file" id="fileN">
    var seq = 1;
    for (var i = 0; i < tagElements.length; i++)
    {
        if (tagElements[i].className.match("inpval"))
        {
            tagElements[i].setAttribute("id", "file" + seq);
            tagElements[i].setAttribute("name", "filenm" + 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;
        }
    }
}

function fileInputChanged(obj)
{
    if (!obj)
        return;
        
    var objTR = obj.parentNode.parentNode;
    var rowId = objTR.sectionRowIndex;
    
    // 「削除」ボタンの表示
    var objBtn = document.getElementById("delBtn" + rowId);
    if (!objBtn)
        return;
        
    objBtn.style.cssText = "display:block;";
}
	

HTMLコード


<form id="frm" name="frm" action="" method="post" enctype="multipart/form-data" >
    <div>新しい行を追加:<input type="button" id="add" name="add" value="追加" onclick="appendRow()"></div>
    <table border="1" id="tbl" style="empty-cells: show;">
        <tr>
            <th style="text-align:right; width:40px;">番号</th>
            <th style="width:200px;">ファイル</th>
            <th style="width:40px;"> </th>
        </tr>
        <tr>
            <td style="text-align:right; width:40px;"><span class="seqno">1</span></td>
            <td style=""><input class="inpval" type="file" id="file1" name="filenm1" value="blah blah blah" size="30" onchange="fileInputChanged(this)"></td>
            <td style="width:40px;"><input class="delbtn" type="button" id="delBtn1" value="削除" onclick="deleteRow(this)" style="display:block;"></td>
        </tr>
    </table>
    <br>
    <p>
        <span style="color: red;">「送信」ボタンを押しても何も処理しません。</span>
        <br>
        <input type="submit" value="送信">
    </p>
</form>
	

関連リンク