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相关联？如果收音机改变了怎么样？我怎样才能建立这种关联并只更新这些值？

非常感谢任何想法，片段或链接，以帮助我了解如何执行此操作。

修改

为了确保我的问题清楚，我确实有我抓住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数组中。

更改无线电值并与数据库和html表中的特定ID相关联

修改

2 个答案: