Javascript 将html表格转换为可选形式

我不是在寻找一个具体的例子，而是在寻找我的过程是否正确的更多例子。 我正在做一个梦幻足球选秀申请，我有一张可以选秀的球员表。我正试图弄清楚如何让用户从表中选择一个球员，并起草他们。这就是我目前的想法：

不要将表作为html返回，而是将每一行作为JS对象返回

单击一行时，使用玩家ID填充隐藏表单

填充隐藏表单时，启用“选择”按钮

提交表单时，使用js将球员添加到用户名册中，并重新提交表格和球员名册 这有意义吗？我将使用jquery，但我在JS方面的经验非常有限，所以我尝试将其分解，以便学习

---

谢谢

我认为您确实需要查看（尽管angular.js是另一个选项）

让我们考虑一下你试图机械地做什么。您有一个用户界面（UI），它是您的浏览器DOM。用户将与此进行交互。在这背后，您想要的（尽管您还没有明确说明）是在用户做出选择时更新基础模型

基本上有两种方法可以做到这一点。首先，JQuery&no-ViewModel使用click事件和监听器，手动收集数据，将其粘贴到表单中，并通过AJAX发布。只要你的应用程序变得越来越复杂，你就会在午餐盒里哭泣

更好的方法是使用ViewModel—业务对象的内存表示。从玩家、分数、名册与表单、文本框等方面考虑。使用Knockout的魔力是什么？您可以使用称为模型绑定的技术来装饰各种HTML元素（输入表单、标签等）。基本上，您可以说给定的输入是ViewModel（VM）的给定成员上的属性。这将从您的关注点中删除所有底层管道，并且UI和VM保持同步。从那里，您可以使用Breeze.js来管理VM与web服务器之间的通信。角度是另一种方法，尽管我还没有使用它

现在你可能想知道“我几乎不知道JQuery，为什么我需要跑出去学习另一个库，我想开始构建我的应用程序了”。JQuery是一个库，而Knockout不是。这是一个框架。把框架想象成一个库，但对应该做什么有强烈的意见。Knockout在JQuery中也发挥了很好的作用，但是您确实非常非常希望尽可能地限制DOM操作

你也会发现很多教程

现在，一些人可能会向您指出其他竞争框架的方向。你可能最终会转向Angular，这是一种“所有东西都在一个盒子里”的方法，在这种方法中，as Knockout更像是一匹一招的小马。但这并不是真正的弱点。淘汰赛有一件事做得很好，那就是你现在所追求的。其他库可以很好地使用它，您可以在学习时添加它们，或者在学习和成长时迁移到Angular或其他任何库

---

祝你好运

如评论中所述，您应该使用AJAX（）将数据发送到服务器并更新表和花名册。这样你就不必填写假表格了。您可以向表行添加一个

dataplayer=“playerId”

，并将其与AJAX调用一起发送

您可以使用：

<tr data-id="foo" onclick="selectPlayer(this)">
  ..
</tr>

---

我认为这个想法是合理的，但实施可能会有挑战性，特别是对于经验有限的人来说。这是有道理的。只要确保我们在（4）中使用AJAX，就不必重新呈现整个页面。

function selectPlayer(element) {
  $.ajax({
    type: 'POST',
    url: '...',
    data: { playerId: $(this).data('id') }
  })
  .done(function (data) {
    // TODO: update roster & table
  });