首页 > 解决方案 > 使用动态ip从html表中获取数据并将数据填充到javascript对象中

问题描述

我有一个页面可以动态创建多个表“所有表都具有静态表类名称”,但每个表都有一个唯一的 id 名称。

用户可以编辑每个表,然后在提交时保存更改。需要的是选择修改后的表中的数据并将其发送到服务器。我使用具有类名的单个表实现了代码,效果很好,下面是代码:

    var rows = [].slice.call($('.TableStaticClassName')[0].rows);

    var keys = [].map.call(rows.shift().cells, function (e) {
        return e.textContent.replace(/\s/g, '');
    });

    var result = rows.map(function (row) {
        return [].reduce.call(row.cells, function (o, e, i) {
            o[keys[i]] = e.textContent;
            return o;
        }, {})
    });

问题是当我尝试在有多个表时使用此代码时。我现在看起来像这样,例如:

<table class="TableStaticClassName" id="12345"></table>
<table class="TableStaticClassName" id="23456"></table>
<table class="TableStaticClassName" id="34567"></table>

当我有多个表时,我将无法使用表类名称,因为它将从所有表中选择数据。因此,当我尝试使用带有如下代码的表 id 从单个表中选择数据时

var x = document.getElementById("12345").rows[0].cells.length;

甚至我在单个表上使用的示例

var rows = [].slice.call($('#12345')[0].rows);

我收到错误“TypeError: undefined is not an object”,我无法读取已更改表的行内容。我尝试了不同的解决方案和实现,但它们最终都给了我同样的错误。

任何帮助,将不胜感激。先感谢您

标签: javascriptphphtml

解决方案


我实际上找到了一个有效的解决方案,所以我将发布它以防将来有人遇到同样的问题。解决方案是将 id 和类名结合起来,下面是代码片段。

var rows = [].slice.call($('#'+dynamicGeneratedIdVariable+'.TableStaticClassName')[0].rows);

        var keys = [].map.call(rows.shift().cells, function (e) {
            return e.textContent.replace(/\s/g, '');
        });

        var result = rows.map(function (row) {
            return [].reduce.call(row.cells, function (o, e, i) {
                o[keys[i]] = e.textContent;
                return o;
            }, {})
        });

推荐阅读