JS 43 - 将表格式表单的资料列输出为 JSON 格式

大家好!

今天要继续昨天的表格式表单,将新增的资料列输出为 JSON 格式。
我们进入今天的主题吧!


样式

.caption {
    display: table-caption;
}

程序码

const trs = Felix('.tr');
const textarea = Felix('#result textarea');

form.on('submit', output);

function output(e) {
    e.preventDefault();

    const obj = {};
    const ids = [].map.call(inputs, (input) => input.id);

    Felix.forEach(trs, function (tr) {
        let i = 1;
        const children = tr.children;
        const key = obj[children[0][0].value] = {};

        Felix.forEach([].slice.call(children, 1, -1), function (td) {
            key[i++] = td[0].value;
        });
    });
    
    textarea[0].textContent = JSON.stringify(obj);
}

实测

<body>
    <form class="table">
        <!-- ... -->
        <div class="caption">
            <input type="submit" value="Output as JSON Format">
        </div>
    </form>
    <div id="result">
        <textarea readonly></textarea>
    </div>
</body>

范例连结制作中。


差不多也到尾声了。
如果对文章有任何疑问,也欢迎在下方提问和建议!
我是 Felix,我们明天再见!


<<:  [PM日常002] 随时保持警戒

>>:  【从零开始的 C 语言笔记】第十二篇-Math 函式库介绍与应用

Android Studio初学笔记-Day26-ExpandableListVIew(2)

接续昨天,今天要讲的是ExpandableListView的主体拉,首先创一个java档,我命名为M...

资安学习路上-网站常见漏洞与 Injection的爱恨情仇4

SQL Injection 承接上次所提,透过万用字串' or 1=1--,可不须验证,盗用其他人帐...

定时器爬虫练习

这次我用上篇练习的基本定时器进行爬虫,但是过程中遇到了困难,总感觉连资料都没办法好好抓取,所以只好先...

[Day5] Android - Kotlin笔记:ListAdapter + DiffUtil 进阶应用 - 复数itemViewType

Problem 昨天我们提到ListAdapter + DiffUtil在一般RecyclerVi...

Day30_CSS3-Text效果

继续介绍CSS3的文字效果 文字阴影 h1 { text-shadow: 5px 5px 5px #...