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


Change radio values and associate with specific id in database and html tables

我有一个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关联。

当您首先生成表时,在包含ID的特殊foramt中构建单选按钮的ID。例如,第一行单选按钮的ID可以是123456-1第二行单选按钮的ID可以是789000-1
第三行单选按钮的ID可以是123456-2第四行单选按钮的ID可以是123456-1

在onClick中,获取ID并将其传递给DB,然后使用新值更新具有该ID的所有行。

然后在AJAX返回后,您运行另一个横跨所有表的Javascript例程,并查找符合以下条件的ID:123456-*,您获得这些单选按钮并将其切换为ON。这将处理当前表视图中显示的所有行(我认为您可能将表拆分为多个页面)。

这里有一种方法:

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数组中。