我试图从HTML表中调用一行到JS函数中

时间：2017-03-29 20:25:50

标签： javascript html

我昨晚开始了，所以我确定有一个简单的解决方案，而且b）没有忘记我的代码非常糟糕的事实。 所以我从一个网站上提取了这个Stat表，我已经运行了一个函数，这样当我在网站上输入一个团队名称时，它会返回一个数字。但是，我要做的就是拥有它，这样当我在其中输入一个团队名称时，不会返回一个数字，而是它在表格上的相应行。目前在函数中调用的数字现在只是占位符。正如您所看到的，我尝试使用分配给凯尔特人队行的ID在函数末尾调用一行，但它返回的是[object HTMLTableRowElement]。 感谢任何帮助，谢谢!! 

 <html>
<canvas id = 'gCanvas' width = '400' height = '600'></canvas>
<script>
var groceryItem = "";

window.onload = function() {
    canvas = document.getElementById('gCanvas');
    ctx = canvas.getContext('2d');
    window.addEventListener('keydown', keyPressed, false);
};

function keyPressed(e) {
    if (e.keyCode != '13') {
        var letter = String.fromCharCode(parseInt(e.keyCode));
        groceryItem += letter;
        console.log(groceryItem);
    }

    if (e.keyCode == '13') {
        grocery();
        groceryItem = "";
    }

}

function grocery() {
    ctx.clearRect(0,0,canvas.width, canvas.height);
    drawBackground();
    ctx.fillStyle = 'black';
    ctx.font="40px Arial";

    switch (groceryItem) {
case 'CELTICS':
    ctx.fillText("1", 50, 50);
    break;
  case 'CAVALIERS':
  case 'CAVS':
    ctx.fillText('2', 50, 50);
    break;
  case 'WIZARDS':
    ctx.fillText('3', 50, 50);
    break;
  case 'RAPTORS':
    ctx.fillText('4', 50, 50);
    break;
  case 'HAWKS':
    ctx.fillText('5', 50, 50);
    break;
    case 'BUCKS':
    ctx.fillText('6', 50, 50);
    break;
     case 'PACERS':
    ctx.fillText('7', 50, 50);
    break;
     case 'HEAT':
    ctx.fillText('8', 50, 50);
    break;
     case 'BULLS':
    ctx.fillText('9', 50, 50);
    break;
     case 'PISTONS':
    ctx.fillText('10', 50, 50);
    break;
     case 'HORNETS':
    ctx.fillText('11', 50, 50);
    break;
     case '76ERS':
    ctx.fillText('12', 50, 50);
    break;
     case 'KNICKS':
    ctx.fillText('13', 50, 50);
    break;
     case 'MAGIC':
    ctx.fillText('14', 50, 50);
    break;
     case 'NETS':
    ctx.fillText('15', 50, 50);
    break;
     case 'WARRIORS':
    ctx.fillText('16', 50, 50);
    break;
     case 'SPURS':
    ctx.fillText(index('23'), 100, 100);
    break;
     case 'ROCKETS':
    ctx.fillText('18', 50, 50);
    break;
     case 'JAZZ':
    ctx.fillText('19', 50, 50);
    break;
     case 'CLIPPERS':
    ctx.fillText('20', 50, 50);
    break;
     case 'THUNDER':
    ctx.fillText('21', 50, 50);
    break;
     case 'GRIZZLIES':
    ctx.fillText('22', 50, 50);
    break;
     case 'TRAILBLAZERS':
    ctx.fillText('23', 50, 50);
    break;
     case 'NUGGETS':
    ctx.fillText('24', 50, 50);
    break;
     case 'MAVERICKS':
    ctx.fillText('25', 50, 50);
    break;
     case 'PELICANS':
    ctx.fillText('26', 50, 50);
    break;
     case 'TIMBERWOLVES':
    ctx.fillText('27', 50, 50);
    break;
     case 'KINGS':
    ctx.fillText('28', 50, 50);
    break;
     case 'SUNS':
    ctx.fillText('29', 50, 50);
    break;
     case 'LAKERS':
    ctx.fillText('30', 50, 50);
    break;
  default:
    ctx.fillText('Invalid Team', 50, 50);
    break;

    }
}
function drawBackground() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,canvas.width, canvas.height);

}
</script>

<div class="nba-stat-table">
  <div class="nba-stat-table__overflow" data-fixed="2" role="grid">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th sort="" cf="" data-field="TEAM_NAME" class="text sorted desc" ripple=""><br>TEAM</th>
            <th sort="" cf="" data-field="GP" data-rank="" data-dir="-1" ripple="">GP</th>
            <th sort="" cf="" data-field="W" data-rank="" data-dir="-1" ripple="">W</th>
            <th sort="" cf="" data-field="L" data-rank="" data-dir="-1" ripple="">L</th>
            <th sort="" cf="" data-field="W_PCT" data-rank="" data-dir="-1" ripple="" class="asc">WIN%</th>
            <th sort="" cf="" data-field="MIN" data-rank="" data-dir="-1" ripple="">MIN</th>
            <th sort="" cf="" data-field="EFG_PCT" data-rank="" data-dir="-1" ripple="">eFG%</th>
            <th sort="" cf="" data-field="FTA_RATE" data-rank="" data-dir="-1" ripple="">FTA<br>Rate</th>
            <th sort="" cf="" data-field="TM_TOV_PCT" data-rank="" data-dir="-1" ripple="">TOV%</th>
            <th sort="" cf="" data-field="OREB_PCT" data-rank="" data-dir="-1" ripple="">OREB%</th>
            <th sort="" cf="" data-field="OPP_EFG_PCT" data-rank="" data-dir="-1" ripple="">Opp<br>eFG%</th>
            <th sort="" cf="" data-field="OPP_FTA_RATE" data-rank="" data-dir="-1" ripple="">Opp<br>FTA&nbsp;Rate</th>
            <th sort="" cf="" data-field="OPP_TOV_PCT" data-rank="" data-dir="-1" ripple="">Opp<br>TOV%</th>
            <th sort="" cf="" data-field="OPP_OREB_PCT" data-rank="" data-dir="-1" ripple="">Opp<br>OREB%</th>
            <th sort="" cf="" hidden="" data-field="GP_RANK" ripple="">GP RANK</th>
            <th sort="" cf="" hidden="" data-field="W_RANK" ripple="">W RANK</th>
            <th sort="" cf="" hidden="" data-field="L_RANK" ripple="">L RANK</th>
            <th sort="" cf="" hidden="" data-field="W_PCT_RANK" ripple="">WIN% RANK</th>
            <th sort="" cf="" hidden="" data-field="MIN_RANK" ripple="">MIN RANK</th>
            <th sort="" cf="" hidden="" data-field="EFG_PCT_RANK" ripple="">eFG% RANK</th>
            <th sort="" cf="" hidden="" data-field="FTA_RATE_RANK" ripple="">FTA<br>Rate RANK</th>
            <th sort="" cf="" hidden="" data-field="TM_TOV_PCT_RANK" ripple="">TO<br>Ratio RANK</th>
            <th sort="" cf="" hidden="" data-field="OREB_PCT_RANK" ripple="">OREB% RANK</th>
            <th sort="" cf="" hidden="" data-field="OPP_EFG_PCT_RANK" ripple="">Opp<br>eFG% RANK</th>
            <th sort="" cf="" hidden="" data-field="OPP_FTA_RATE_RANK" ripple="">Opp<br>FTA&nbsp;Rate RANK</th>
            <th sort="" cf="" hidden="" data-field="OPP_TOV_PCT_RANK" ripple="">Opp<br>To&nbsp;Ratio RANK</th>
            <th sort="" cf="" hidden="" data-field="OPP_OREB_PCT_RANK" ripple="">Opp<br>OREB% RANK</th>
          </tr>
        </thead>
        <tbody>
          <!-- ngRepeat: (i, row) in page track by row.$hash --><tr data-ng-repeat="(i, row) in page track by row.$hash" index="5" class="ng-scope">
            <td class="rank ng-binding"></td>
            <td class="team-name first sorted"><a href="/team/#!/1610612764/traditional/?" class="ng-binding">Washington Wizards</a></td>
            <td class="ng-binding">74</td>
            <td class="ng-binding">46</td>
            <td class="ng-binding">28</td>
            <td class="ng-binding">.622</td>
            <td class="ng-binding">3,587</td>
            <td class="ng-binding">52.7</td>
            <td class="ng-binding">0.255</td>
            <td class="ng-binding">14.0</td>
            <td class="ng-binding">24.0</td>
            <td class="ng-binding">52.1</td>
            <td class="ng-binding">0.284</td>
            <td class="ng-binding">15.4</td>
            <td class="ng-binding">24.5</td>
                  </tr><!-- end ngRepeat: (i, row) in page track by row.$hash --><tr data-ng-repeat="(i, row) in page track by row.$hash" index="3" class="ng-scope" id=1>
            <td class="rank ng-binding"></td>
            <td class="team-name first sorted"><a href="/team/#!/1610612738/traditional/?" class="ng-binding">Boston Celtics</a></td>
            <td class="ng-binding">74</td>
            <td class="ng-binding">48</td>
            <td class="ng-binding">26</td>
            <td class="ng-binding">.649</td>
            <td class="ng-binding">3,567</td>
            <td class="ng-binding">52.4</td>
            <td class="ng-binding">0.269</td>
            <td class="ng-binding">13.4</td>
            <td class="ng-binding">21.3</td>
            <td class="ng-binding">50.4</td>
            <td class="ng-binding">0.289</td>
            <td class="ng-binding">14.1</td>
            <td class="ng-binding">25.0</td>
          </tr><!-- end ngRepeat: (i, row) in page track by row.$hash --><tr data-ng-repeat="(i, row) in page track by row.$hash" index="12" class="ng-scope">
            <td class="rank ng-binding"></td>
            <td class="team-name first sorted"><a href="/team/#!/1610612737/traditional/?" class="ng-binding">Atlanta Hawks</a></td>
            <td class="ng-binding">74</td>
            <td class="ng-binding">38</td>
            <td class="ng-binding">36</td>
            <td class="ng-binding">.514</td>
            <td class="ng-binding">3,587</td>
            <td class="ng-binding">50.3</td>
            <td class="ng-binding">0.297</td>
            <td class="ng-binding">15.6</td>
            <td class="ng-binding">23.6</td>
            <td class="ng-binding">50.8</td>
            <td class="ng-binding">0.233</td>
            <td class="ng-binding">15.3</td>
            <td class="ng-binding">24.1</td>
          </tr><!-- end ngRepeat: (i, row) in page track by row.$hash -->
        </tbody>
      </table>
  </div> <!-- .stat-table__overflow -->
</div>
<script>
document.getElementById('1')
document.write(document.getElementById('1'))
</script>
</html>

2 个答案:

答案 0 :(得分：0)

你最好的选择是

  • 为每行生成唯一ID
  • 使用像document.querySelector（...）这样的表达式来获取其id
    • 行
  • 从提取的行中读取结果

您可以通过迭代数据单元来读取行的内容。

函数document.querySelectorAll()将返回与CSS类型模式匹配的元素集合。然后我们可以使用for循环来获取单元格内容。我使用了textContent，但如果您需要支持旧版浏览器，则可以使用innerHTML。

var row=document.querySelectorAll('tr#id-1>td');
var data=[];
for(var i=0;i<row.length;i++) data.push(row[i].textContent);

data数组现在将包含您的内容，您可以根据需要进行处理。

答案 1 :(得分：0)

更新2

PLUNKER

<小时/> 更新1

✎在Snippet的评论中表示更新。

<小时/> 使用.map()方法遍历每一行（团队），单元格（统计信息列）和单元格内容（统计信息），详细信息在代码段中进行了注释。

SNIPPET 1

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
</head>

<body>
  <div class="nba-stat-table">
    <table class="table">
      <thead>
        <tr>
          <th></th>
          <th data-field="TEAM_NAME" class="text sorted desc"><br>TEAM</th>
          <th data-field="GP">GP</th>
          <th data-field="W">W</th>
          <th data-field="L">L</th>
          <th data-field="W_PCT" class="asc">WIN%</th>
          <th data-field="MIN">MIN</th>
          <th data-field="EFG_PCT">eFG%</th>
          <th data-field="FTA_RATE">FTA<br>Rate</th>
          <th data-field="TM_TOV_PCT">TOV%</th>
          <th data-field="OREB_PCT">OREB%</th>
          <th data-field="OPP_EFG_PCT">Opp<br>eFG%</th>
          <th data-field="OPP_FTA_RATE">Opp<br>FTA&nbsp;Rate</th>
          <th data-field="OPP_TOV_PCT">Opp<br>TOV%</th>
          <th data-field="OPP_OREB_PCT">Opp<br>OREB%</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="rank"></td>
          <td class="team-name first sorted">
            <a href="http://stats.nba.com/team/#!/1610612764/traditional/?">Washington Wizards</a>
          </td>
          <td>74</td>
          <td>46</td>
          <td>28</td>
          <td>.622</td>
          <td>3,587</td>
          <td>52.7</td>
          <td>0.255</td>
          <td>14.0</td>
          <td>24.0</td>
          <td>52.1</td>
          <td>0.284</td>
          <td>15.4</td>
          <td>24.5</td>
        </tr>
        <tr>
          <td class="rank"></td>
          <td class="team-name first sorted">
            <a href="http://stats.nba.com/team/#!/1610612738/traditional/?">Boston Celtics</a>
          </td>
          <td>74</td>
          <td>48</td>
          <td>26</td>
          <td>.649</td>
          <td>3,567</td>
          <td>52.4</td>
          <td>0.269</td>
          <td>13.4</td>
          <td>21.3</td>
          <td>50.4</td>
          <td>0.289</td>
          <td>14.1</td>
          <td>25.0</td>
        </tr>
        <tr>
          <td class="rank"></td>
          <td class="team-name first sorted">
            <a href="http://stats.nba.com/team/#!/1610612737/traditional/?">Atlanta Hawks</a>
          </td>
          <td>74</td>
          <td>38</td>
          <td>36</td>
          <td>.514</td>
          <td>3,587</td>
          <td>50.3</td>
          <td>0.297</td>
          <td>15.6</td>
          <td>23.6</td>
          <td>50.8</td>
          <td>0.233</td>
          <td>15.3</td>
          <td>24.1</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    // Reference the table ✎
    var T = document.querySelector('table');

    /* Collect the cells from the 1st row of T
    || then convert HTMLCollection into an array ✎
    */
    var cols = Array.from(T.rows[0].cells);

    /* map() passing cols array 
    || returns the array of header titles ✎
    */
    var cats = cols.map(function(th, idx) {
      return th.textContent;
    });


    /* Collect all <tr> in <tbody> in a NodeList
    || Convert NodeList into an array
    */
    var rows = Array.from(document.querySelectorAll('tbody tr'));

    // Use the .map() method to...
    rows.map(function(tr, idx) {

      /* ...iterate through each <tr>
      || and collect it's <td> to a HTMLCollection
      || then convert it to an array
      */
      var cells = Array.from(tr.children);

      // Use the .map() method to...
      cells.map(function(td, idx) {

        // ...get the text from each <td>
        var stat = td.textContent;

        /* Log results ✎
        || The first part is a iteration
        || of the cats array which consists
        || of the text of each category
        || title in the column headers (<th>)
        */
        console.log(cats[idx] + ': ' + stat);

        // return results as a new array of stats
        return stat;
      });

    });
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题