javascript - 我正在尝试将 HTML 表中的一行调用到 JS 函数中-6ren

javascript - 我正在尝试将 HTML 表中的一行调用到 JS 函数中

转载作者：行者123 更新时间：2023-11-28 04:49:01

我昨晚开始，所以我 a) 确信有一个简单的解决方案 b) 没有忘记我的代码非常糟糕这一事实。所以我从网站上提取了这个统计表，并且我已经运行了一个函数，这样当我在网站中输入团队名称时，它会返回一个数字。然而，我想做的是拥有它，这样当我在其中输入团队名称时，它不会返回数字，而是返回表格上的相应行。函数中当前调用的数字目前只是占位符。正如您所看到的，我尝试使用分配给 Celtics 行的 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

PLUNKER

<小时/> 更新1

片段注释中的

✎ 表示更新。

<小时/>使用 .map()方法来迭代每行(团队)、单元格(统计列)和单元格内容(统计)，详细信息在代码片段中注释。

片段 1

<!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>

关于javascript - 我正在尝试将 HTML 表中的一行调用到 JS 函数中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43103483/

文章推荐： javascript - 向 Weebly 添加随机页面按钮

文章推荐： javascript - 如何访问javascript变量的函数

文章推荐： jquery - 如何从复选框中删除行？

Python 一行
我想要以下代码的 Python 单行解决方案，但是怎么做呢？ total = 0 for ob in self.oblist: total += sum(v.amount for v in o
一行 Python 代码轻松构建树状热力图
今天和大家一起学习一种可视化技术：构建树状热力图treemap。树形图易于可视化，且易于被人理解。树状图通过展示不同大小的矩形，以传达不同大小的数据量，一般认为，较大的矩形意味着占总体的一大部分，而较
if-statement - 一行 if 语句
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
Perl 一行 if 语句
我有一个声明 $set eq "Y" ? $set = "N" : $set = "Y"; 但不管它总是设置为 "N" # Toggle setting if ($set eq "Y") { $
PHP代码显示不正确[一行] EOL
当我尝试在我的服务器上上传一个 php 文件时，我收到一条消息:"Parse error: ..." 我知道这是什么意思，但问题是别的。如果我在本地服务器上编辑文件(我的计算机上安装了 XAMPP)
python - 一行 for 循环用于具有变量增量和二维列表搜索的二维列表
我是 python oneliner 循环的新手。我希望用户将数据输入到二维列表中，同时提醒他他们将输入的数据索引。我的代码是: flag=0 x=[[int(input("enter the "+
变量后面可以输出字符串吗？ (一行 printf)
尝试在变量之前和之后打印字符串。C 是否有能力使用一条语句来显示此输出？这有效: float value = 5; printf("\nThe value of %f", value); print
mysql - 一行/水平显示MySQL查询的输出
我正在验证我创建的 MySQL 数据库的结果，为此，我需要一些屏幕截图。例如，以下查询: select distinct run_ID from ngsRunStats_FK.failedRuns
一行 JavaScript 测试和赋值
有人可以解释一下这个 JS LINE 吗？数据是一个对象。 var list = data == null ? [] : (data.wine instanceof Array ? data.wine
一行 HTML 下拉列表
如何在一行中添加三个下拉菜单。我想把我的日、月和年放在一行中，但不能这样做。任何帮助将不胜感激。我附上我的 jsfiddle . .... 最佳
html 100%-(一行)
我正在尝试使用 html 将 iframe 的高度设置为 100%(我已成功完成)，但我还在顶部添加了一行额外的文本，所以它太高了 ~16px(这需要一个滚动条)。有没有办法更改 iframe 以显示
java - 将字符串数组写入文件 - 一行？
这是一个示例，我从文件中读取行作为字符串，以使整个文件作为字符串数组: String[] ArrayOfStrings = (new Scanner( new File("log.txt") ).us
c - 一行#if语句
我有一个包含大量定义的配置文件，用于在编译期间包含模块。此外，这意味着我必须经常检查代码内部的定义。每张支票需要 3 行，是否可以在一行中执行此操作。 #if FUNC_ENABLED functio
css - 水平列表不内联/一行
我正在尝试制作一个水平列表，其中每个列表中的 s 的高度为 385px，宽度为 400px。我尝试使用 inline-block 使列表水平排列，但这似乎不起作用。也就是说，我的意思是列表仍然是垂
一行 CSS，无法比较免费和付费主题文件
这很烦人，我有一个带有 css 文件的 wordpress 主题，所有内容都在一长行中。我想知道为什么有人会那样做。现在我已经升级了，我需要将旧文件与新文件进行比较，以便我可以接受更改。 Meld、d
python - 一行 for 循环并修改对象
我有一个对象数组，其中每个对象都有一个 search_order 属性。我要检查数组并将所有对象的属性增加 1这是简单的方法: res = [] for r in array: r.searc
linux - 移动文件并重命名 - 一行
我在某些服务器上遇到许多具有相同内容和相同名称的文件。我需要隔离这些文件进行分析，所以我不能只删除重复项。操作系统为Linux(centos和ubuntu)。我枚举文件名和位置并将它们放入文本文件中
Javascript 拼图 - 一行
你能在不抛出错误的情况下解决这个问题吗？答案是单线。这是来自一个死的职位发布，在回复中要求回答。我认为这是剔除受访者的聪明方法，但我似乎无法在不出错的情况下回答它。显而易见的解决方案: f.moo(
Java 一行 if 语句
这个问题在这里已经有了答案: Is it ok if I omit curly braces in Java? [closed] (16 个答案) 关闭 9 年前。我在 java 中使用没有大括号
python - 一行，三个变量
我在这里试图用 python 制作一个简单的计算器，我想知道是否可以在命令运行时将前 3 行合并为一行。我的意思是；我不必按 Enter 键来键入下一个数字/运算符，而是按空格键(在输入部分)。 wh

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我正在尝试将 HTML 表中的一行调用到 JS 函数中