Question

假设我的id ='table'网页上有一张这样的表：

Name        Age          Money(USD)    DATE
A            19            4          2019-03-11 16:15:35
B            20            0          2019-03-11 16:16:37
C            27            3          2019-03-13 04:15:43
D            34            0          2019-03-13 04:16:57

您能帮我找到 MONEY列中的第一个最小值吗？在Column1中， B 的值为0，而对于整个表行的 HIGHLIGHT B，使用javascript而不使用任何库和任何onClicking按钮？

注意：我已经四处搜寻，只是不幸地无法找到解决我问题的正确答案。

谢谢。

更新：我只是得到了这样的一段Javacript，以获取第一个最小值并将其打印出来，但无法用它突出显示整个行

var table = document.getElementById("table"), minVal;
    for(var i = 1; i < table.rows.length; i++)
    {
      // if its the first row get the value
      if(i === 1){minVal = table.rows[i].cells[2].innerHTML; }
     // test with the other values
     else if(minVal > table.rows[i].cells[2].innerHTML){
       minVal = table.rows[i].cells[2].innerHTML;
     }
   }
document.getElementById("val").innerHTML = " Minimum Value = "+minVal;
console.log(maxVal);

Answer 1

var table = document.getElementById("table"), minVal, minI;
for(var i = 1; i < table.rows.length; i++){
   if(i === 1){
      minVal = table.rows[i].cells[2].innerHTML;
   }
   else if(minVal > table.rows[i].cells[2].innerHTML){
      minVal = table.rows[i].cells[2].innerHTML;
      minI = i;
   }
}
table.rows[i].cells[2].innerHTML = '<span style="background:red">' + table.rows[minI].cells[2].innerHTML + '</span>';

类似的东西。

Answer 2

var table = document.getElementById("table");
var minVal = undefined;
for(var i = 1; i < table.rows.length; i++)
{
    if(i === 1){
        minVal = table.rows[i].cells[2]; 
    }
    else if(minVal.innerHTML > table.rows[i].cells[2].innerHTML){   
        minVal = table.rows[i].cells[2];
    }
}

minVal.parentElement.style.background="yellow";

Answer 3

您需要做两件事：

使用innerHTML将+转换为数字
在循环时跟踪行号。

这是代码

var table = document.getElementById("table"), minVal;
let minRow = 1;
    for(var i = 1; i < table.rows.length; i++)
    {
      // if its the first row get the value
      if(i === 1){
          minVal = +table.rows[i].cells[2].innerHTML;

      }
     // test with the other values
     else if(minVal > table.rows[i].cells[2].innerHTML){
       minVal = table.rows[i].cells[2].innerHTML;
       minRow = i; 
     }
   }

let row = table.rows[minRow];
row.style.backgroundColor = 'red';

Answer 4

这只是跟踪最小行，并让您停止使用该格式：

const highlightLowest = () => {
  var rows = table.rows;
  var minRow = rows[0]
  for (var i = 1; i < rows.length; i++){
     rows[i].classList.remove('highlight')
     if (Number(rows[i].cells[2].innerHTML) < Number(minRow.cells[2].innerHTML)) {
        minRow = rows[i]
     }
  }
  minRow.classList.add('highlight')
}

tr.highlight td {background-color: yellow}

<table id="table">
  <tr><td>A</td><td>19</td><td>4</td><td>2019-03-11 16:15:35</td></tr>
  <tr><td>B</td><td>20</td><td>0</td><td>2019-03-11 16:16:37</td></tr>
  <tr><td>C</td><td>27</td><td>3</td><td>2019-03-13 04:15:43</td></tr>
  <tr><td>D</td><td>34</td><td>0</td><td>2019-03-13 04:16:57</td></tr>
</table>

<hr />

<button onClick="highlightLowest()">Highlight</button>

Answer 5

您在这里。 “突出显示”功能将要作为突出显示依据的列作为参数。

// Get your table's headers    
headers = document.querySelectorAll('#table tbody tr th')

// Get your table's headers 
rows = document.querySelectorAll('#table tbody tr')

// Declaring function that takes wanted column as argument
highlight = (colName) =>{
let min = 0;
for(i=0;i<headers.length;i++){
	if(headers[i].innerText == colName){
		for(j=1;j<rows.length;j++){
      value = parseInt(rows[j].children[i].innerHTML);
        if(j == 1){
          min = value;
}
        if(value < min){
          rows[j].style.backgroundColor = "yellow"
          break;
}
     

      
}
}
}
}

<table id="table">
  <tbody><tr>
    <th>Test 1</th>
    <th>Test 2</th>
    <th>Test 3</th>
  </tr>
  <tr>
    <td>7</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr>
    <td>12</td>
    <td>1</td>
    <td>5</td>
  </tr>
  <tr>
    <td>15</td>
    <td>89</td>
    <td>4</td>
  </tr>
  <tr>
    <td>3</td>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>2</td>
    <td>4</td>
    <td>8</td>
  </tr>
</tbody></table>

<input type='text' id='col'>
<button onclick=highlight(document.getElementById('col').value)>Highlight based on input column</button>

如何使用JavaScript突出显示某列中具有最小值的表行

5 个答案: