将html表格转换为可选择的表单

Turn an html table into a selectable form

本文关键字：可选择 表单 转换 html 表格      更新时间：2023-09-26

我不是在寻找一个具体的例子，而是更多的如果我的过程是正确的。我正在制作一个梦幻足球选秀申请，我有一个选秀球员的表。我试图找出如何让用户从表中选择一个球员，并起草他们。到目前为止，我是这么想的:

  1. 不返回html形式的表，而是返回每一行JS对象
  2. 当一行被点击时，用玩家的ID填充一个隐藏表单
  3. 当隐藏表单被填充时，启用选择按钮
    4. 当表单提交时，使用js将球员添加到用户的花名册中，并渲染表格和球员的花名册。

这有意义吗?我将使用jquery，但我对JS的经验非常有限，所以我试图打破这一点，以便我可以学习。

谢谢!

我认为你真的需要看看knockout.js(尽管angular.js是另一种选择)

让我们考虑一下你想要机械地做什么。你有一个用户界面(UI)，它是你的浏览器DOM。用户将与之交互。在这背后，您希望拥有的(尽管您还没有明确表达它)是让底层模型在用户做出选择时得到更新。

基本上有两种方法。第一个全JQuery &没有ViewModel是使用点击事件和监听器并手动收集数据，将其粘贴到表单中并通过AJAX发布。当你的应用程序变得更复杂时，你会在你的午餐盒里哭泣。

更好的方法是使用ViewModel——业务对象的内存表示。想想球员、分数、花名册、表格、文本框等。使用Knockout，您可以使用一种称为模型绑定的技术来修饰各种HTML元素(输入表单、标签等)。基本上，您说给定的输入是ViewModel (VM)的给定成员上的属性。这将从您的关注点中删除所有底层管道，并且UI和VM保持同步。从那里，你可以使用Breeze.js来管理你的虚拟机到你的web服务器的通信。Angular是另一种方法，尽管我还没有用过它。

现在你可能想知道"我几乎不知道JQuery，为什么我需要跑出去学习另一个库，我想开始构建我的应用程序"。好吧，JQuery是一个库，而Knockout不是。它是一个框架。把框架想象成一个库，但是对应该做什么有强烈的意见。Knockout也可以很好地与JQuery配合使用，但是您真的、真的、真的希望尽可能地限制DOM操作。

你也会发现很多教程。= http://learn.knockoutjs.com//?教程介绍

现在有些人可能会向您指出其他竞争框架的方向。你最终可能会转向Angular，它是一种"一体式"的方法，而Knockout更像是一种单一技巧的小马。但这并不是真正的弱点。淘汰赛有一件事做得很好，那就是你现在想要的。其他库可以很好地使用它，你可以在学习的时候添加它们，或者在学习和成长的过程中迁移到Angular或其他任何库。

祝你好运!

正如评论中提到的，您应该使用AJAX (http://api.jquery.com/jquery.ajax/)将数据发送到服务器并更新表和花名册。这样你就不用填一张假表格了。您可以向表行添加一个data-player="playerId"，并将其与AJAX调用一起发送。

你可以使用:

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

和下面的代码作为大纲:

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