【问题标题】:get values from table as key value pairs with jquery使用 jquery 从表中获取值作为键值对
【发布时间】:2026-02-23 00:15:02
【问题描述】:

我有一张桌子:

<table class="datatable" id="hosprates">
                <caption> hospitalization rates test</caption> <thead>
                <tr>
                    <th scope="col">Funding Source</th> <th scope="col">Alameda County</th> <th scope="col">California</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">Medi-Cal</th>
                        <td>34.3</td>
                        <td>32.3</td>
                    </tr>
                    <tr>
                        <th scope="row">Private</th>
                        <td>32.2</td>
                        <td>34.2</td>
                    </tr>
                    <tr>
                        <th scope="row">Other</th>
                        <td>22.7</td>
                        <td>21.7</td>
                    </tr>
                </tbody>
            </table>

我想将每行的第 1 列和第 2 列值作为对检索,最终看起来像这样 [funding,number],[funding,number]

到目前为止我已经这样做了,但是当我提醒它时,它只显示 [object, object]...

  var myfunding =  $('#hosprates tbody tr').each(function(){
  var funding = new Object();

  funding.name = $('#hosprates tbody tr td:nth-child(1)').map(function() {
              return $(this).text().match(/\S+/)[0];
             }).get();
  funding.value= $('#hosprates tbody tr td:nth-child(2)').map(function() {
              return $(this).text().match(/\S+/)[0];
             }).get();

});
alert (myfunding);

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:
    var result = $('#hosprates tbody').children().map(function () {
        var children = $(this).children();
    
        return {
           name: children.eq(0).text(),
           value: children.eq(1).text()
        };
    }).get();
    

    这将构建一个数组,格式如下:

    [
     { name : "...", value: "..." },
     { name : "...", value: "..." },
     { name : "...", value: "..." }
    ]
    

    要获取第一行的名称,请使用:

    alert(result[0].name);
    

    对于值:

    alert(result[0].value);
    

    编辑:如果您想要完全按照您指定的结果:

    var result = $('#hosprates tbody').children().map(function () {
        var children = $(this).children();
    
        return "[" + children.eq(0).text() + "," + children.eq(1).text() + "]"
    }).get().join(",");
    

    【讨论】:

    • 嗨,马特,谢谢,简单多了..但我需要按照我上面描述的方式格式化返回的结果...然后我会在 result.name 和 result.value 上执行每个函数来格式化每个一对?还是结果?
    • 太棒了,我自己尝试过类似的方法,但一直失败,我没想到要使用 join()。
    • 您能否在第一个示例末尾解释 .get() 的用途?
    • @SpaceNinja:它将map()返回的jQuery对象转换成一个数组。见api.jquery.com/get/#get2
    • 啊,谢谢。当我搜索时,我看到了这个提到 Ajax:api.jquery.com/jquery.get。谢谢!
    【解决方案2】:

    然后试试这个(demo):

    var funding = $('#hosprates tbody tr').map(function(){
        return [[ $(this).find('th').eq(0).text() , // find first and only <th>
                $(this).find('td').eq(0).text() ]]; // find first <td> in the row
        }).get();
    
       alert(funding);  // Output: Medi-Cal,32.3,Private,34.2,Other,21.7
    

    警报显示只显示数组内的数据,它实际上是这样格式化的:

    [["Medi-Cal", "32.3"], ["Private", "34.2"], ["Other", "21.7"]]
    

    所以您可以像这样获得 Medi-Cal 数据:

    alert(funding[0][0] + ' -> ' + funding[0][1]);  // output: Medi-Cal -> 34.3
    

    【讨论】:

    • 谢谢,但是,这将返回 Medical,32.3,private,34.2,other,21.7
    • 抱歉,它不允许我编辑错误的评论...我现在看到您说警报不会向我显示数据,但问题是我需要获取文本值并格式化它们就像我的例子一样,没有引号或额外的空格。
    • 对不起 - 我不清楚。我有很多这样的对,而不仅仅是 3 个,似乎应该有一种方法可以完全按照我的需要自动输出数据,而无需手动调用funding[0][0] 等……这似乎不是最有效的方法。
    • 我想我不明白你想要你的输出...你希望你的输出有方括号和逗号,所以它都是文本?根据您的问题,我不确定您要删除哪些单词(您只想要第一个单词?)。如果你的输出都是文本,那么获取值会更加困难,除非你同时创建一个数组和文本字符串。