如何在 django-tables 中添加行 ID 以从特定行中获取选定的单选按钮

Question

我正在尝试使用 jQuery 来获取所选单选按钮所在的行以及使用 django-tables2 时所选单选按钮的值。

所以，我在 table 中有三列，我用 django-tables2 渲染了它。第三列是带有 HTML 模板的模板列 (buttons.html:

<form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form>

然后我将模板列添加到 table（我通过继承 tables.Table 创建了自己的 table class）：

myTableCol={}
        mylist = []
        for i in queryResults:
            mydic = {}
            for j in i:
                className=str(type(j)).split(".")[1]
                mydic.update({className: j.name})
                myTableCol.update({className: tables.Column()})
            mylist.append(mydic)
        myTableCol.update({'Action': tables.TemplateColumn(template_name="buttons.html", verbose_name=("Actions"), orderable=True)})
        Meta = type('Meta', (object,), {'template_name':"django_tables2/bootstrap4.html", 'attrs':{"class": "paleblue"},})
        myTableCol.update({'Meta':Meta})
        QueryTable2=type('QueryTable', (tables.Table,), myTableCol)

然后使用 {% render_table table %} 呈现 table，给出下面的 html。我正在尝试获取为该行选择的单选按钮。

$(document).ready(function () {
        $('input').click(function() {
            var $selectedButton = $('input[name=result]:checked').val();
            var $row = $(this).closest("tr");
            var $rowData = $row.children("td").map(function() {
                        return $(this).text();
                    }).get();
                    alert($selectedButton);
                    });});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="table-container">  
        <table class="paleblue">
                <thead class="thead-default" >
                <tr>                
                    <th class="orderable">                        
                            <a href="?sort=UseCase">UseCase</a>                        
                    </th>                
                    <th class="orderable">                        
                            <a href="?sort=MainFlow">MainFlow</a>                        
                    </th>                        
                    <th class="orderable">                        
                            <a href="?sort=Action">Actions</a>                        
                    </th>                
                </tr>
                </thead>                  
                <tbody >             
                    <tr scope="row" class="even">                        
                            <td >UC3_Make_Online_Payments</td>                        
                            <td >UC3_BasicFlowGroup_BF_5</td>                      
                            <td ><form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form></td>
                    </tr>
                    <tr scope="row" class="odd">
                            <td >UC9_Create_New_Account</td>
                            <td >UC9_BasicFlowGroup_BF_3</td>
                            <td ><form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form></td>
                    </tr>
                    
                
                    
                    <tr scope="row" class="even">
                        
                            <td >UC5_Login</td>
                        
                            <td >UC5_BasicFlowGroup_BF_3</td>
                        
                            
                        
                            <td ><form  class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
  <label for="Yes">Yes</label>
  <input type="radio" class="No" name="result" value="No">
  <label for="No">No</label><br>
</form></td>       
                    </tr>            
                </tbody>
        </table>
</div>

问题是当一个单选按钮被选中时，值是基于被选中的第一行单选按钮的。我知道最好在 button.html 中使用表单 ID 选择器而不是表单 class，但我不知道如何从特定的 table 行访问特定的单选按钮。

如何将 css id 选择器动态添加到呈现的 table 表单，然后使用 jquery 获取选定的单选按钮？

Answer 1

要获取选定的输入，只需使用

var $selectedButton = $(this).val();

而不是

var $selectedButton = $('input[name=result]:checked').val();

Fiddle

如何在 django-tables 中添加行 ID 以从特定行中获取选定的单选按钮

How to add a row ID in django-tables to get the selected radio button from the specific row

javascript

django

jquery

django-tables2