javascript - 根据另一列和输入字段计算 html 列值

Question

如何根据来自另一列和输入字段的值将值插入 html 表列（使用 Javascript 或 jQuery）。

例如（见下面的代码），如果我115在输入字段中输入数字，列advance应该显示1每个运动员的值，其中列second中的数字低于输入字段中的数字，如果数字高于运动员的值在高级列中应该变成0.

列数会有所不同，但列 seconds 中的值将始终具有类名“seconds”，列中的值将始终具有类名“advance”。

<table>
  <tr>
    <th>Athlete</th>
    <th>Seconds</th>
    <th>Advance</th>
  </tr>
  <tr>
    <td>A.E.</td>
    <td>120</td>
    <td class="advance">.</td>
  </tr>
  <tr>
    <td>G.F.</td>
    <td>90</td>
    <td class="advance">.</td>
  </tr>
  <tr>
    <td>T.L</td>
    <td>110</td>
    <td class="advance">.</td>
  </tr>
</table>
<input type="number">
<button id="btn">
        Confirm
        </button>

感谢您抽出宝贵时间

标签： javascriptjqueryhtml

Answer 1

好的，为了解决这个问题，我在您的号码输入中添加了一个 id；看这里：

<input id='number' type="number">

并且在创建每个运动员的行时，为每个运动员添加一个类“运动员数据”到“< tr >”。像这样：

<tr class='athlete-data'>
 <td>G.F.</td>
 <td>90</td>
 <td class="advance">.</td>
</tr>

最后，这里是 Javascript

//Grab all the athlete rows by the class we added to the <tr>'s'
let athleteRows = document.getElementsByClassName('athlete-data');

//Listen for button click
document.getElementById('btn').addEventListener('click', ()=> {
let number = document.getElementById('number').value;
filterAthletes(number);
});


function filterAthletes(limit){
    //Iterate over the athlete rows
    for(let row of athleteRows){

    //Get their time
    let athleteTime = row.getElementsByTagName('td')[1].textContent;

    //Compare them, and set the text content.
    if (parseFloat(athleteTime) >= parseFloat(limit)){
      row.getElementsByClassName('advance')[0].textContent = '1';
    }
   else {
      row.getElementsByClassName('advance')[0].textContent = '0';
    }
   }
 }