Question

我想通过JavaScript在下面的<td></td>中添加数字。例如，使用以下描述：

<td id='last'> + formatNumber（data.tickers [key] .last）+ </td> <td id='high'> + formatNumber（data.tickers [key] .high）+ </td> <td id='low'> + formatNumber（data.tickers [key] .low）+ </td>

如何通过JavaScript更改表数据元素的文本？

<td id='new1'> = + <td id='last'> + <td id='high'> + </td> <td id='new2'> = + <td id='high'> + <td id='loww'> + </td>

Answer 1

首先，我会让您的生活更轻松一些。与其使用document.getElementsByTagName('tr')[3].getElementsByTagName('td')[2]来获得第四个tr元素的第三个td元素（[0] =第一个，[2] =第三个，等等），这将有助于使您的代码更加有趣更易于阅读。如果您知道默认情况下代码和命令的可靠性，则不需要在每个元素上都使用id属性。

function tag_(t)
{//Example: tag_('body')[0];
 return (document.getElementsByTagName(t)) ? document.getElementsByTagName(t) : false;
}

Object.prototype.tag_ = function(t)
{//Example: id_('unique_id').tag_('td')[0];
 return (this.getElementsByTagName && this.getElementsByTagName(t) && this.getElementsByTagName(t).length > 0) ? this.getElementsByTagName(t) : false;
}

两者读取和将数据写入 any 元素的最简单方法是使用textContent。

在第三个td上阅读第四个tr：

//Read an element's text node:
console.log(tag_('tr')[2].tag_('td')[5].textContent);

//Write to an element's text node:
tag_('table')[0].tag_('tr')[2].tag_('td')[5].textContent = '1,234');

JavaScript在类型方面有些严格。因此，如果您需要对刚刚读过的文本内容进行数学运算，则需要将其转换：

Number(tag_('tr')[1].tag_('td')[5].textContent);//'123' becomes `123`
Number(tag_('tr')[2].tag_('td')[2].textContent);//'a123' becomes `NaN` (Not a Number)

如果我没记错的话，我最近使用以下命令从字符串中剥离非数字文本：

var my_number = Number('String or replace with object reference'.replace(/\D/g,''));

现在，您将获得读/写方面的知识，并克服与之相关的更多怪异之处，我将迭代...迭代！尽管我认为完整答案比部分答案更可取，但您可能已经知道这一点，因为不仅您自己，而且其他人也在future中阅读了此答案。

var table = tag_('table');

for (var i = 0; i < table.length; i++)
{
 console.log(table[i]);
 var tr = table[i].tag_('tr');//Whatever table[i] is and it's table rows.

 for (var j = 0; j < tr[i].length; j++)
 {
  console.log(tr[j]);
  var td = table[i].tag_('tr')[j].tag_('td');//All the table data elements.

  for (var k = 0; k < td.length; k++)
  {
   //apply read/write conditions here.
   //potentially call a second global function to keep your code reusable.
  }
 }
}

这应该有助于您对表数据元素进行特定且迭代的定位，以帮助您学习和实现目标。

Answer 2

尝试一下：

// these target the cell elements
let last = document.getElementById("last");
let high = document.getElementById("high");
let low = document.getElementById("low");

let new1 = document.getElementById("new1");
let new2 = document.getElementById("new2");

// now we convert cell content to numbers, add them and make them 2 decimal places.
new1.textContent = (parseFloat(last.textContent) + parseFloat(high.textContent)).toFixed(2);

new2.textContent = (parseFloat(high.textContent) + parseFloat(low.textContent)).toFixed(2);

td {
  border: solid 1px;
}

<table>
<tr>
<th>last</th>
<th>high</th>
<th>low</th>
<th>new1</th>
<th>new2</th>
</tr>
<tr>
<td id='last'> 23.40 </td>
<td id='high'> 28.20 </td>
<td id='low'> 22.10 </td>
<td id='new1'></td>
<td id='new2'></td>
</tr>
</table>

如何通过HTML表中的JavaScript添加和减去数字

2 个答案: