iT邦幫忙

2021 iThome 鐵人賽

1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 42

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

  • 分享至 

  • xImage
  •  

大家好!

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


樣式

.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,我們明天再見!


上一篇
JS 41 - 顯示非同步請求的上傳進度條
下一篇
JS 43 - 將表格式表單的資料列輸出為 JSON 格式
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言