Question

我有一个HTML表格，其中标题包含在tds的第一行中。我之所以这么说是因为我根本不使用ths，我不希望任何人感到困惑。逻辑是一样的。

我要做的是使用字典，以替换当前javascript中的多行（我的代码段中的解决方案优先）。

但是在我的第二个解决方案中，我想看看是否有更好的选择，因为我认为for循环可能会使代码变慢。

//First Solution
var row = document.getElementsByTagName('tr')[0];
var columns = row.querySelectorAll('td');

for (var i = 1; i <= columns.length; i++) {
  if (row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML.includes("aaa")) {
    row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML = "AAAA";
  }
  if (row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML.includes("bbb")) {
    row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML = "BBBB";
  }
  if (row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML.includes("ccc")) {
    row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML = "CCCC";
  }
}


//Second Solution
dict = {'aaa':'AAAA', 'bbb':'BBBB', 'ccc':'CCCC'}
for (var key in dict)
{
   for (var i = 1; i <= columns.length; i++) 
   {
     if (row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML.includes(key)) 
     {
        row.querySelector('tr:nth-child(1) > td:nth-child(' + i + ')').innerHTML = dict[key];
     }
   }
}

<table>
  <tbody>
    <tr><td>aaa header</td><td>bbb header</td><td>ccc header</td></tr>
    <tr><td>ONE</td><td>10000</td><td>30000</td></tr>
  </tbody>
</table>

Answer 1

嗯，我没有在这里看到一个问题，但我认为你正在提到优化代码的性能？

您可以检查在控制台上运行代码的时间，如下文所述。 Haven没有自己尝试，但我自己开始探索编写优化代码，所以如果你想要做的话，让我知道结果:)

http://adripofjavascript.com/blog/drips/measuring-javascript-performance-with-console-time.html

使用Javascript使用字典（如果它们包含）更改表值

1 个答案: