フォームの内容を一行にまとめ表に追加

投稿日: 2013年12月11日 作成者: alphasis

JavaScriptを使い、フォームの内容を一行（tr要素）にまとめ、表（table要素）に最後の行（tr要素）として追加するサンプル。

実装例

【入力欄】
名前：
地域：
年齢：
コメント：
名前 地域 年齢 コメント

実装例の動作について

「【入力欄】」の「追加」ボタンをクリックすると、「【入力欄】」のフォームの内容を一行にまとめ、「【入力欄】」の下の表に追加する。

ソースコード

JavaScript

<script type="text/javascript">
function appendToTable() {
    var $formObject = document.getElementById( "sampleForm" );
    var $tableObject = document.getElementById( "sampleTable" );
    var $tr = "<tr>";
    $tr += "<td>" + $formObject.formName.value + "</td>";
    $tr += "<td>" + $formObject.formArea.value + "</td>";
    $tr += "<td>" + $formObject.formAge.value + "</td>";
    $tr += "<td>" + $formObject.formComent.value + "</td>";
    $tr += "</tr>";
    $tableObject.insertAdjacentHTML( "beforeend", $tr );
}
</script>

HTML

<div id="wrapSampleForm">
    <form id="sampleForm">
        【入力欄】
        <br />
        名前：<input type="text" name="formName" value="太郎">
        <br />
        地域：
            <select name="formArea">
                <option selected>関東</option>
                <option>東海</option>
                <option>関西</option>
            </select>
        <br />
        年齢：
            <select name="formAge">
                <option selected>10代</option>
                <option>20代</option>
                <option>30代</option>
            </select>
        <br />
        コメント：<textarea name="formComent">コメント</textarea>
        <br />
    </form>
    <button onclick="appendToTable()">追加</button>
</div>
<table id="sampleTable">
    <tr>
        <th id="tableName">名前</th>
        <th id="tableArea">地域</th>
        <th id="tableAge">年齢</th>
        <th id="tableComent">コメント</th>
    </tr>
</table>

CSS

<style>
#wrapSampleForm {
    width: 500px;
    margin: 10px;
    padding: 10px;
    border: 1px solid gray;
    border-radius: 10px;
}
#wrapSampleForm {
    background-color: #f0f8ff;
}
#sampleTable {
    background-color: #ffffcc;
}
#sampleTable th {
    color: #000000 !important;
}
#sampleTable th,
#sampleTable td {
    font-size: 15px !important;
    border: 1px solid gray;
    background-color: #ffffcc;
}
#tableName {
    width: 20%;
}
#formArea {
    width: 15%;
}
#formAge {
    width: 15%;
}
#tableComent {
    width: 50%;
}
#sampleForm * {
    margin: 0 0 7px 0;
    vertical-align: text-top;
}
</style>

スポンサード リンク

カテゴリー: JavaScript, フォーム, 表, 逆引き パーマリンク