Question

如何基于另一个列和输入字段中的值将值插入html表列（使用Javascript或jQuery）。

例如（请参见下面的代码），如果我在输入字段中输入数字115，则列advance应为每位运动员显示值1，而他们在{列中的数字{1}}小于输入字段中的数字，如果数字较大，则前进列中的运动员的值应变为second。

列数将有所不同，但是秒列中的值将始终具有类名称“ seconds” ，而advanced列中的值将始终具有类名称“ advance “ 。

感谢您抽出宝贵的时间

Answer 1

好的，为解决这个问题，我在您的数字输入中添加了一个ID；看到这里：

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

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

<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';
    }
   }
 }

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

1 个答案: