2012-12-08 93 views
0

我在表格的每一行中保留了一个单选按钮。 我希望用户选择一行,并在提交时将该行发送到服务器。jquery select table with table

因此,当我有单选按钮中的行时,我的期望是在给定时间只能选择一个柱,但我可以选择所有单选按钮。如何获取所选内容并将该行信息作为提交的一部分发送。

<form id="myform1" action="/data" method="post" >  

<table> 
<tr>  

     <td > <input type="text" id="slno1" size="25" value="10" /> </td>  
     <td > <input type="text" id="data" size="10" value="this is a test" /> </td>  
     <td > <input type="radio" value="" id="editable" /> </td>  
    </tr> 
    <tr>  

     <td > <input type="text" id="slno2" size="25" value="10" /> </td>  
     <td > <input type="text" id="data1" size="10" value="this is a test1" /> </td>  
     <td > <input type="radio" value="" id="editable" /> </td>  
    </tr> 
    </table> 
    <input type="submit" id="mysu1" Value="submits" /> 

</form> 

回答

1

好了。首先,你需要让所有的输入名字名字......可以说,行标识符...

现在就jQuery的推移,你会做到以下几点:

//First we select the form and listen to the submit event 
$("#myform1").submit(function(event) { 
    //we get which radio button was selected 
    var theForm = $(this); 
    var theSelectedRadioButton = theForm.find('input[name="row-identifier"]:checked'); 

    //from here we can get the entire row that this radio button belongs to 
    var theSelectedRow = theSelectedRadioButton.parents("tr:first").get(0).outerHTML; 

    //now theSelectedRow should have the row html you want... you can send it to the server using an ajax request and voiding this default action of the form "which is redirect to the action page 
    $.post("YOUR_SERVER_URL", { 
     rowHTML: theSelectedRow 
    }); 
    event.preventDefault(); 
    return false; 
});​ 

关于jQuery的POST方法的详细信息:http://api.jquery.com/jQuery.post/有关jQuery的形式

更多信息提交的事件在这里:http://api.jquery.com/submit/

希望这有助于:)

1

为了能够在多个选项中只选择一个单选按钮,需要使它们具有相同的名称。而你,因为你给每个单选按钮也应该检查你的代码,两个不同的ID属性

+0

谢谢@koopajah你清除了一个问题。另一个是当我选择我试图使用的单选按钮:$(“:checked”)。val()并选择该值我该如何做 –