JS 42 - 新增或刪除表格式表單的資料列 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

Modern Web

JavaScript 從 50% 開始，打造函式庫不是問題！系列第 42 篇

JS 42 - 新增或刪除表格式表單的資料列

13th鐵人賽

Felix

2021-10-27 23:59:13

3697 瀏覽

大家好！

今天要實作新增和刪除資料列。
我們進入今天的主題吧！

樣式

.table {
    display: table;
}

.tr {
    display: table-row;
}

.th,
.td {
    display: table-cell;
}

.th {
    font-weight: bold;
    text-align: center;
}

程式碼

const form = Felix('form');
const inputs = Felix('#inserter input');

Felix(inputs[inputs.length - 1]).on('click', insert);

function insert() {
    const trs = Felix('form .tr');
    const pos = inputs[0].value < trs.length - 2 ? inputs[0].value : trs.length - 1;
    const tr = Felix(trs[pos]).insert('.tr', null, 'afterend');
    const tds = [].map.call(inputs, () => Felix(tr).insert('.td'));
    const els = [].map.call(inputs, function (el, i) {
        const value = i !== this.length - 1 ? inputs[i].value : '－';
        return Felix(tds[i]).insert(`input[type="${el.type}"][value="${el.value}"][readonly]`);
    });
    
    Felix(els[els.length - 1]).on('dblclick', remove);
    form[0].reset();
}

function remove(e) {
    Felix(this).off(e.type, remove);
    Felix(this.parentElement.parentElement).remove();
}

實測

<body>
    <form class="table">
        <div class="tr">
            <div class="th">Day</div>
            <div class="th">Title</div>
            <div class="th">Author</div>
            <div class="th">Date</div>
            <div class="th">Article</div>
            <div class="th">Action</div>
        </div>
        <div id="inserter" class="tr">
            <div class="td"><input type="number" id="day" required></div>
            <div class="td"><input type="text" id="title" required></div>
            <div class="td"><input type="text" id="author" required></div>
            <div class="td"><input type="date" id="date" required></div>
            <div class="td"><input type="number" id="article" required></div>
            <div class="td"><input type="button" value="＋"></div>
        </div>
    </form>
</body>

範例連結製作中。

差不多也到尾聲了。
如果對文章有任何疑問，也歡迎在下方提問和建議！
我是 Felix，我們明天再見！