原生js-二维数组-表格展示-列最大值突显

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>原生js-二维数组-表格展示=列max突显</title>
</head>
<style>
  body{
    text-align: center;
  }
  .box{
    margin: 0 auto;
    display: inline-block;
  }
  table{
    text-align: center;
    border: 1px solid #aaa;
    border-collapse:collapse;
  }
  td{
    border: 1px solid #ccc;
    padding: 0.6em;
    width: 1.4em;
    height: 1.4em;
  }
  .colMax{
    background: #edf;
  }
</style>
<body>
  <h1>table展示</h1>
  <pre>
    [[1,2,33,5], [2,10,15,16], [3,1,21,20]]

返回HTML,表格渲染 列最大值突出显示 不能使用函数库

</pre> <div class="box"></div> <script> var arr = [[1, 2, 33 ,5], [2, 10, 15, 16], [3, 1, 21, 20]], len = arr.length, len1, str = "<table>"; for (var i = 0; i < len; i++) { // 行遍历 len1 = arr[i].length; str += "<tr>"; for (var j = 0; j < len1; j++) { var colM,cla='',max = 0; // 在列遍历这里定义这三个变量很重要 for (var k = 0; k < len; k++) { if (max < arr[k][j]) { max = arr[k][j]; colM = k; } } if (arr[i][j] === max) { cla = 'colMax'; console.log(colM,j,max) } str += "<td class='" + cla + "'>" + arr[i][j] + "</td>"; } str += "</tr>"; } str += "</table>"; document.getElementsByClassName('box')[0].innerHTML = str; </script> </body> </html>

在线查看

2018-03-10 05:14 浏览(75) 留言(0)