时间戳

首页 > 解决方案 > 从 HMTL 表创建 Javascript 对象

javascript - 从 HMTL 表创建 Javascript 对象

问题描述

我有一张像

    <table id="misc_inputs">
        <thead>
            <tr><th>Property</th><th>Input</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>a</td> 
                <td><input type="number" value="1"></td>
            </tr>
            <tr>
                <td>b</td> 
                <td><input type="number" value="2"></td>
            </tr>
       ...

我想将该表转换为 Javascript 对象，例如

misc_inputs = {"a": 1, "b": 2, ...

如何生成结果？

标签： javascriptjquery

解决方案

您可以使用以下可重复使用的 javascript 方法将任何 HTML 表格转换为 Javascript 对象。

<table id="MyTable">
<thead>
    <tr><th>Property</th><th>Input</th></tr>
</thead>
<tbody>
    <tr>
        <td>a</td>
        <td><input type="number" value="1"></td>
    </tr>
    <tr>
        <td>b</td>
        <td><input type="number" value="2"></td>
    </tr>
</tbody>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function () {
    
    function ConvertHTMLToJSObject(htmlTableId)
    {
        var objArr = {};
        var trList = $('#' + htmlTableId).find('tr');
        $('#' + htmlTableId).find('tbody tr').each(function ()
        {
            var row = $(this);
            var key = $(row).first().text().trim();
            var value = $(row).find('input').attr("value");
            objArr[key] = value;
        });

        return objArr;
    }

    var obj = ConvertHTMLToJSObject("MyTable");
    console.log(obj);
});

推荐阅读