将值插入 HTML 表答案

【问题标题】：Inserting Values Into HTML Table将值插入 HTML 表
【发布时间】：2017-03-26 19:18:11
【问题描述】：

我正在尝试创建一个简单的表格，允许用户输入他们的用户名和一个值，然后查看他们的值立即添加到表格中。

图片：

当前代码：

   <!doctype html>
<html lang="en">
    <style>
        table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
    </style>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="page for t1 fantasy sports">
        <title>T1 Fantasy</title>
    </head>
    <body>
        <h1>T1 Fantasy Sports</h1>
        <table style="width=100%">
        <tr>
            <th>Username</th>
            <th>Total Points</th>
            <th>Total Points Yesterday</th>
        </tr>
        <tr>
            <td>nmaron</td>
        </tr>   
        <tr>
            <td>memaron</td>
        </tr>
        <tr>
            <td>youngplum13</td>
        </tr>
        <tr>
            <td>burstometry</td>
        </tr>
        <tr>
            <td>Kermit</td>
        </tr>
        </table>

        <form>
        Username: <br>
            <input type="text" name="username"></br>
        Points Scored: <br>
        <input type="number" name="points"></br>
        <input type="submit" value="Submit">
        </form>
    </body>
</html>

对此非常陌生。我不想做任何复杂的事情，我需要将用户输入的值放在他们各自的用户名旁边。

【问题讨论】：

我试图弄清楚如何将数字放在正确的列下，然后增加总列的数字。我不知道如何增加特定的单元格。

标签： javascript html input html-table

【解决方案1】：

对于一个简单的解决方案，您可以使用 jquery，这里有您的示例的解决方案plunkr

$(document).ready(function() {
    $("#add-points").submit(function(event) {
    event.preventDefault();
    var username = $("input[name=username]").val();
    var newPoints = parseInt($("input[name=points]").val());

    $("#puntuation tr").each(function(i, row) {
        var $row = $(row);
        var user = $row.find(".playerName").html();
        if(user === username) {
            var $totalPoints = $row.find(".totalPoints");
            var $yesterday = $row.find(".yesterday");
            $yesterday.html($totalPoints.html());
            var currentPoints = $totalPoints.html();
            if(currentPoints) {
                $totalPoints.html(parseInt(currentPoints)+newPoints); 
            } else {
                $totalPoints.html(newPoints);
            }
        }
    });
    });
});

【讨论】：

这就是我要找的，除了我需要弄清楚如何控制它发布在哪一列下。例如，如果用户在第 1 天提交了 2 分，则应在两列下发布。但是，在第 2 天，当用户提交 3 时，第一列（分数）应增加 3，总计 5，然后第二列应显示数字 3。这就是我遇到的问题。
现在看看 plunkr！
该死，这正是我所需要的。您能推荐一个提供良好教程的网站吗？我无法相信我为此付出了多少努力。尽管如此，感谢您抽出宝贵的时间来写这篇文章，我离我很近。
@ChasenBettinger pluralsight.com 有很好的编程课程，你可以从一些 jquery 课程开始。请在此处将我的答案标记为正确。

【解决方案2】：

伪代码（使用Javascript，可以放在文档的头部）：

On form submission,  
foundMatch = false;
For each row excluding the headers {,  
  if(the contents of the first <td> == the entered username)  {  
    add a <td> to that row containing the value of the points field  
    and record that you found a match (foundMatch = true).  
    Break out of the iteration unless a duplicate username in the table should also get the score added.
  }  
}  

If you reach the end of the table not having found a match (foundMatch == false), {  
  add a row to the table with the values of the username and points fields.  
}

我在这里提供伪代码只是为了鼓励您更好地理解自己的编码问题，并在未来的问题上投入更多精力。

【讨论】：

感谢您的回复。如何将其集成到 html 文件中？
@ChasenBettinger 您必须先编写 javascript，但是您可以将其放在 HTML 文档的头部。