如何让python使用Flask&JINJA2从动态表中检索用户输入的数据

2024-10-04 11:21:54 发布

您现在位置：Python中文网/ 问答频道 /正文
9183 3

我正在构建一个Flask应用程序，其中包括一个表，用户可以在其中更改单元格并“应用”这些更改，例如在数据库中更新。在

图片如下 enter image description hereenter image description here

我在让flask检索通过表单提交的数据时遇到问题。在

行数是动态的，取决于列表中Id的数量。在

这是我的html——很抱歉，我还在学习。在

                            <tbody> 
                            <form method="post" name="productCost">
                        {% for n in range(name_list | length) %}
                            <tr> 
                                <th scope="row" >{{name_list[n]}}</th> 
                                <td>{{ID_list[n]}}</td> 
                                <td id="cost{{n}}">${{cost_list[n]}}</td> 
                                <td>---</td>
                                <td id="changes{{n}}"><button onclick="costChanges{{n}}()">Edit</button></td> 
                            </tr> 
                        <script>
                            function costChanges{{n}}() {
                                document.getElementById("cost{{n}}").innerHTML = "<input placeholder='{{cost_list[n]}}' name={{ID_list[n]}}>";
                                document.getElementById("changes{{n}}").innerHTML = "<button onclick='applyChanges{{n}}()' type='submit'>Apply</button><button onclick='cancelChanges{{n}}()'>Cancel</button>";

                            }
                            function applyChanges{{n}}() {
                                docuemnt.getElementById("cost{{n}}").innerHTML = document.forms["productCost"]["{{ID_list[n]}}"]
                            }
                            function cancelChanges{{n}}() {
                                document.getElementById("cost{{n}}").innerHTML = "{{cost_list[n]}}";
                                document.getElementById("changes{{n}}").innerHTML = "<button onclick='costChanges{{n}}()'>Edit</button>";

                            }
                        </script>
                        {%endfor%}
                    </form>
                        </tbody>

这是我的python/flask代码：

^{pr2}$

我需要python识别所做的更改并将其存储在变量中。这是为了在数据库中更新它——但我不需要数据库代码方面的帮助。我只需要帮助python获取已更改的单元格并识别它所在的行。在


Tags： nameid数据库flaskfunctionbuttondocumentlist
1条回答
网友
1楼 · 发布于 2024-10-04 11:21:54

将jquery与ajax一起使用要简单一些。后者使您能够通过与后端脚本通信来动态更新表以更新数据库。在

首先，创建HTML脚本（下面的代码为本例创建了一个不同的表布局，但是，您可以根据下面的代码替换自己的表布局）。jquery干净地处理Apply、Cancel和Edit按钮功能，并通过ajax与后端通信：

tables.html：

<html>
  <body>
   <table>
   <tr>
     <th>ID</th>
     <th>Cost</th>
     <th>Effective Date</th>
     <th>Make Changes</th>
   </tr>
  {%for row in data%}
  <tr>
    <td>{{row.id}}</td>
    <td class='cost{{row.rowid}}'>{{row.price}}</td>
    <td>{{row.date}}</td>
    <td>
      <div id='options{{row.rowid}}'>
        <button id='mutate{{row.rowid}}'>Edit</button>
      </div>
    <td>
  </tr>
  {%endfor%}
 </table>
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
  $("div[id^='options']").on('click', 'button', function(){
   var the_id = this.id.match('\\d+');
   var the_type = this.id.match('[a-zA-Z]+');
   if (the_type == "mutate"){
    $('#options'+the_id).html('<button id="cancel'+the_id+'">Cancel</button>\n<button id="apply'+the_id+'">Apply</button>');
    var current_cost = $('.cost'+the_id).text();
    $('.cost'+the_id).html('\n<input type="text" class="newval'+the_id+'" value="'+current_cost+'">')
   }
   else if (the_type == 'cancel'){
    $('#options'+the_id).html('<button id="mutate'+the_id+'">Edit</button>');
   }
   else{
    var value = $(".newval"+the_id).val();
    $.ajax({
          url: "/update_cell",
          type: "get",
          data: {newval: value, rowid:the_id},
          success: function(response) {
            $('.cost'+the_id).html(value);
            $('#options'+the_id).html('<button id="mutate'+the_id+'">Edit</button>');
          },
          error: function(xhr) {
            //Do Something to handle error
          }
       });
     }
   });
 });
 </script>
</html>

然后，创建应用程序和路由：

^{pr2}$

现在，在'/update_cell'中，您有了新的price值和product row id，它告诉您要更新哪个sqlite行的价格。注意，在home中，enumerate获得的行id对应用程序至关重要，因为它使jquery知道要更新什么表和sqlite行。在

演示：

enter image description here

相关问题 更多 >

    编程相关推荐