时间戳

首页 > 解决方案 > 根据 onclick 表值预选下拉选项并导航到另一个页面

python - 根据 onclick 表值预选下拉选项并导航到另一个页面

问题描述

我想根据 onclick 表值预先选择下拉选项，同时导航到下拉选项的另一页。

下面是代码

应用程序.py

@app.route('/userinfo',methods=["POST","GET"])
def userinfo():
    result = cursor.execute("SELECT * FROM user ORDER BY id")
    user= cursor.fetchall()
    result1 = cursor.execute("SELECT * FROM header ORDER BY id ")
    header = cursor.fetchall()
    return render_template('userinfo.html', user= user, result1=result1)

用户信息.html

<div class="form-group">
      <div class="cols-sm-10">
        <h5>user onfo </h5>
          <select name="name1" class="teamForm" id="teamDropdown" type="text" placeholder="Select projects">
            {% for i in user %}
                <option id="{{ i.id }}" value= "{{ i.id }}">{{ i.name }}</option>
            {% endfor %}
          </select>
          <select name="tasks" class="teamForm2" id="teamDropdown1" type="text" method="POST">
            {% for j in header %}
            <option id="{{ j.id }}" value= "{{ j.header1 }}" selected>{{j.header1 }}</option>
            <option id="{{ j.id }}" value= "{{ j.header2 }}">{{j.header2 }}</option>
            <option id="{{ j.id }}" value= "{{ j.header3 }}" selected>{{j.header3 }}</option>
            <option id="{{ j.id }}" value= "{{ j.header4 }}" selected>{{j.header4 }}</option>                
            {% endfor %}                  
          </select>
    </div>
</div>

索引.html

<thead>
  {% for row in header %}
   <tr>
      <th data-pk="{{row.id}}">{{row.id}}</th>
      <th data-pk={{row.id}}">{{row.name}}</th>
      <th data-pk="{{row.id}}">{{row.date}}</th>
      <th data-pk="{{row.id}}">{{row.header1}}</th>
      <th data-pk="{{row.id}}">{{row.header2}}</th>
      <th data-pk="{{row.id}}">{{row.header3}}</th>
    </tr>
  {% endfor %}
 </thead>
<tbody>
{% for row in emp %}
<tr>
  <td data-pk="{{row.id}}">{{row.id}}</td>
  <td data-name="name" class="name" data-type="text" data-pk="{{row.id}}">{{row.name}}</td>
  <td class="under-limit" onclick="location.href='/userinfo'">{{row.task1}}</td>
  <td class="under-limit" onclick="location.href='/userinfo'">{{row.task2}}</td>
  <td class="under-limit" onclick="location.href='/userinfo'">{{row.task3}}</td>
</tr>
 {% endfor %}
{/tbody>

当我单击表格单元格时，根据所选的行和列，必须选择下拉选项，同时导航到另一个页面。我试着用 Jquery 做，但我做不到。请任何人都可以帮助我。

标签： pythonhtmljquerymysqlflask

解决方案

我找到了解决方案。

$('.under-limit').on('click', function(id) {
let $cell = $(this);
let txt = $cell.text();
var cellIndex = $cell.index()-1;
var header = $cell.closest('table').find('th').eq($cell.index()-2).text();
alert(txt + ':' + header);

使用导航到另一个页面的 window.location.href 传递标题值。

从上面的代码中删除 onclick 事件

推荐阅读