I know how to toggle text depending on the div id, from this question here Show/Hide text using jquery . My question is if I don't know in advance how many items I have that I want to toggle? As it depends on user input, is there anyway to dynamically assign a toggle function using JQuery each time flask is called?
My template looks like:
<!DOCTYPE html>
<html>
<head>
<title>Flask Template Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
.container {
max-width: 10000px;
padding-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td><h2>Header 1</h2></td>
<td><h2>Header 2</h2></td>
</tr>
{% for group in my_list %}
{% for row in group %}
<tr>
<td>{{ row[0] }}</td>
<td>{{ row[1] }}</td>
</tr>
{% endfor %}
{% endfor %}
</table>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
And my python/flask script looks like:
from flask import Flask, render_template
import pickle
app = Flask(__name__)
@app.route("/")
def template_test():
data=pickle.load(open('results.p','rb'))
newdata = zip(
zip(*(x['titles'] for x in data.values())),
zip(*(x['dates'] for x in data.values())))
list_data=list(newdata)
return render_template('index.html', my_string="Wheeeee!", my_list=list_data)
if __name__ == '__main__':
app.run(debug=True)
The results.p
file can change, so the length of list_data
changes . The idea is for each cell in the HTML table I want to add a show/hide option for the date. But individually for each cell.
So the problem is to assign toggle handlers to a dynamic collection of elements (in this case table cells). This is one approach:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Get the table element by ID.
$('#data-table')
// Get all <a class="toggle"> elements inside the table.
.find('a.toggle')
// Set a click handler for each.
.click(function(e) {
// The details of this will depend on
// where your toggle trigger element is
// relative to the date element that you
// want to toggle.
//
// In this example, the date is in the <span />
// immediately preceding the <a /> toggle.
//
// So we can get the <a /> itself by $(e.target),
// then the date element to toggle using $.prev().
var date = $(e.target).prev();
date.toggle();
});
});
</script>
<title>Toggling table cells dynamically</title>
</head>
<body>
<table id="data-table">
<tr>
<td><h2>Header 1</h2></td>
<td><h2>Header 2</h2></td>
</tr>
<tr>
<td>Title 1</td>
<td><span>Date 1</span> <a class="toggle" href="#">toggle</a></td>
</tr>
<tr>
<td>Title 2</td>
<td><span>Date 2</span> <a class="toggle" href="#">toggle</a></td>
</tr>
<tr>
<td>Title 3</td>
<td><span>Date 3</span> <a class="toggle" href="#">toggle</a></td>
</tr>
[ ...more rows... ]
</table>
</body>
</html>
Check it out here on JSBin to see it in action.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.