JS 42 - 新增或删除表格式表单的资料列

大家好！

今天要实作新增和删除资料列。
我们进入今天的主题吧！

样式

.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，我们明天再见！

<<: 课堂笔记 - 深度学习 Deep Learning (13)

>>: 课堂笔记 - 深度学习 Deep Learning (14)