如何从选定的表行中获取最小和最大数量?

时间:2014-11-09 20:38:33

标签: javascript html-table

这是指我之前的问题。

How to highlight/color multiple rows on selection?

<table id="toppings"  border="1" cellpadding="2">
   <tr id="id1">
      <td>3</td>
      <td>row12</td>
      <td>row13</td>
  </tr>
  <tr id="id2">
      <td>12</td>
      <td>row22</td>
      <td>row23</td>
  </tr>
  <tr id="id3">
      <td>15</td>
      <td>row32</td>
      <td>row33</td>
  </tr>
  <tr id="id4">
      <td>22</td>
      <td>row42</td>
      <td>row43</td>
 </tr>
 <tr id="id5">
      <td>23</td>
      <td>row52</td>
      <td>row53</td>
 </tr>
 <tr id="id6">
   <td>55</td>
   <td>row62</td>
   <td>row63</td>
 </tr>
</table>

Javascript代码:

//Get list of rows in the table
var table = document.getElementById("toppings");
var rows = table.getElementsByTagName("tr");

var selectedRow;

//Row callback; reset the previously selected row and select the new one
function SelectRow(row) {
    if (selectedRow !== undefined) {
        selectedRow.style.background = "#d8da3d";
    }
    selectedRow = row;
    selectedRow.style.background = "white";
}

//Attach this callback to all rows
for (var i = 0; i < rows.length; i++) {
    var idx = i;
    rows[idx].addEventListener("click", function(){SelectRow(rows[idx])});
}

但这次我在表格中添加了一个事件选择行,并尝试从所选行(第一列)中获取最小值和最大值。如上表所示,如果我选择中间四行,我应该得到min = 12和max = 23.如何实现?

1 个答案:

答案 0 :(得分:2)

你可以有两个功能。我展示了getMinValueExample()。

function getMinValueExample(rows){
var minValue = null;
for (var i = 0; i < rows.length; i++){
    var firstTd = rows[i].getElementsByTagName('td')[0];
    var currentValue = parseInt(firstTd.innerHTML);
    if(minValue == null || minValue > currentValue)
        minValue = currentValue;
}
return minValue;
}

(不测试所以可能包含一些类型错误,但你应该明白) 因此,如果在声明行之后调用它,则返回最小值。 如果你打电话给这个,你会得到最大值

function getMaxValueExample(rows){
var maxValue = null;
for (var i = 0; i < rows.length; i++){
    var firstTd = rows[i].getElementsByTagName('td')[0];
    var currentValue = parseInt(firstTd.innerHTML);
    if(maxValue == null || maxValue < currentValue)
        maxValue = currentValue;
}
return maxValue;
}