更改单选值并与数据库和 html 表中的特定 ID 相关联

Question

我有一个 ajax 请求生成一个如下所示的表：

|   ID         |   Name   |   Radio    |
========================================
|  123456      |   One    |     Y,N    |
========================================
|  789000      |   Two    |     Y,N    |
========================================
|  123456      |  Three   |     Y,N    |
========================================
|  348202      |   Four   |     Y,N    |
  

我需要将这些单选开关的值存储在数据库中，然后将它们与具有该 ID 的所有行相关联。例如，如果我单击第 1 行或第 3 行中的 Y 按钮，那么我会将 Y 与这两行关联。

我从按钮的 onclick 中获取 ID，然后通过表单值将其传递给 db 表。任何想法现在如何将每个无线电输入值与其各自的 ID 相关联？如果更换收音机，它将如何工作？我怎样才能建立这种关联并仅更新这些值？

任何想法、sn-ps 或链接将不胜感激，以帮助我掌握如何做到这一点。

编辑

为了确保我的问题很清楚，我确实有一部分我可以抓取 id 并将其与单选按钮相关联。我正在使用它（用于我的真实代码，而不是我的“草图”）：

$j('button').live("click", function(){
    var thisSku = $j(this).closest('tr').find('td:eq(3)').text();
    $j('.skuContainer input').val( thisSku );
}); 

我会将该值（ID）连同从切换中选择的任何内容一起发布到数据库。在我的真实项目中，我需要将多个切换与他们的 ID 关联起来。

Answer 1

首先生成表格时，以包含 ID 的特殊格式构建单选按钮的 ID。例如， 第一行单选按钮的ID可以是123456-1 第二行单选按钮的ID可以是789000-1
第三行单选按钮的ID可以是123456-2 第四行单选按钮的ID可以是123456-1

在 onClick 中，您获取 ID 并将其传递给数据库，您使用新值更新具有该 ID 的所有行。

然后在 AJAX 返回后，您运行另一个跨越所有表的 Javascript 例程并查找与此条件匹配的 ID：123456-*，您将获得这些单选按钮并将它们切换为 ON。这将处理当前表格视图中显示的所有行（我假设您可能将表格拆分为多个页面）。

Answer 2

你可以这样做：

jsFiddle：http://jsfiddle.net/q8kry/1/

HTLM

<table>
    <tbody>
        <tr>
            <td>123456</td><td>One</td><td>Yes<input type="radio" value="0" name="One" />No<input type="radio" value="1" name="One" /></td>
        </tr>
        <tr>
            <td>789000</td><td>Two</td><td>Yes<input type="radio" value="0" name="Two" />No<input type="radio" value="1" name="Two" /></td>
        </tr>
        <tr>
            <td>123456</td><td>Three</td><td>Yes<input type="radio" value="0" name="Three" />No<input type="radio" value="1" name="Three" /></td>
        </tr>
    </tbody>
</table>

<input type="button" id="btnTest" value="Get Values" />

Javascript/jQuery

$("#btnTest").click(function(){

    var myVals = [];

    $("tr").each(function(){
       var $row = $(this);
        alert($row.find("> td:eq(2) > input:checked").val());
        myVals.push({
            id: $row.find("> td:eq(0)").html(),
            val: $row.find("> td:eq(2) > input:checked").val()
        });
    });

    alert(JSON.stringify(myVals)); 

});

虽然我确实认为复选框会更好/简化解决方案。

编辑

要完成答案，您可以将 myVals 发布到服务器，方法是为其分配一个隐藏的表单字段并提交您的表单（完整回发）。或者，您可以通过 ajax 将值发布到服务器并避免完全回发。

如果您只想发布已更改的值，则需要在页面加载时记住它们的值，并且仅当它们与原始值不同时才将它们添加到 myVals 数组中。