首页 > 解决方案 > 使用纯 JS 将表转换为键值对

问题描述

我有一个由行号和价格组成的大表。我希望能够通过使用行号来查找价格。

在此处输入图像描述

function buildtable(){

   var tableObj = document.getElementById( 'table' );

   var allTRs = tableObj.getElementsByTagName( 'tr' );
   for ( var trCounter = 0; trCounter < allTRs.length; trCounter++ )
   {
     var tmpArr = [];
     var allTDsInTR = allTRs[ trCounter ].getElementsByTagName( 'td' );
     for ( var tdCounter = 0; tdCounter < allTDsInTR.length - 1; tdCounter++ )
     {
       tmpArr.push( allTDsInTR[ tdCounter ].innerHTML );
     }
     arr.push( tmpArr );

  }

}

以下代码创建一个列表列表。

在此处输入图像描述

如何更改函数以创建单个密钥对存储?

表格的 HTML

foreach($res as $row) {

  $seat = $row['RowNumber'];  
  $price = $row['Zone.PriceMultiplier * 15.00'];

   echo "<tr>";
   echo "<td>".$seat."</td>";
   echo "<td>".$price."</td>";
   echo "<td><input type='checkbox' name='check_list[]' value=\"$seat;\" onclick='javatest(this);' </td>";
   echo "</tr>";


}

标签: javascript

解决方案


您可以使用对象作为键值映射(哈希表)。

function buildtable() {
    var tableObj = document.getElementById('table');
    var map = {};
    var allTRs = tableObj.getElementsByTagName('tr');
    for (var trCounter = 1; trCounter < allTRs.length; trCounter++) {
        var tmpArr = [];
        var allTDsInTR = allTRs[trCounter].getElementsByTagName('td');
    
        if (allTDsInTR.length) {
           map[allTDsInTR[0].innerHTML.trim()] = parseFloat(allTDsInTR[1].innerHTML.trim());
        }
    }
    
    console.log(map);

}

buildtable();
<table id='table'>
    <thead>
    <tr>
        <td>
            RowNumber
        </td>
        <td>
            Price
        </td>
    <tr>
    </thead>
    <tbody>
    <tr>
        <td>
            U01
        </td>
        <td>
            24.5
        </td>
    <tr>
    <tr>
        <td>
            U02
        </td>
        <td>
            22
        </td>
    <tr>
    </tbody>
</table>

结果将类似于:

{
  "U01": 24.5,
  "U02": 22
}

推荐阅读