2

現在、Jinja2 を使用してデータベースから動的に構築された html テーブルを使用しています。

{% extends "base.html" %}
{% block content %}


  <form action="#" method="POST" accept-charset="utf-8" id="myForm">
      <div><label><input id="master" type="checkbox" ></label></div>
    <fieldset id ="slaves">
    <div class="table">
    <table cellspacing="0" table id="table">
      <caption>Please select the survey sections you would like to complete</caption>
      <colgroup span="19"></colgroup>
        <tr>
          <th scope="col">Organization</th>
          <th scope="col">Survey Header</th>
          <th scope="col">Period name</th>
          <th scope="col">Completed</th>
          <th scope="col">Due</th>
          <th scope="col">check all</th>
          <th scope="col">1</th>
          <th scope="col">2</th>
          <th scope="col">3 </th>
          <th scope="col">4</th>
          <th scope="col">5</th>
          <th scope="col">6</th>
          <th scope="col">7</th>
          <th scope="col">8</th>
          <th scope="col">9</th>
          <th scope="col">10</th>
          <th scope="col">11</th>
          <th scope="col">12</th>
          <th scope="col">13</th>
          <th scope="col">14</th>
          <th scope="col">15</th>
          <th scope="col">16</th>
          <th scope="col">17</th>
        </tr>
        {% set oshp = (0,0,0) %}
        {% set start = True %}
          {% for  survey_table in survey_tables %}


            {% if survey_table.completed != None %}
                {% set color = "#DCF8FF" %}
            {% else %}
                {% set color = "#FFEBF4" %}
            {% endif %}


            {% if oshp != (survey_table.organization, survey_table.survey_header,
                survey_table.period_name)  %}
                {% set oshp = (survey_table.organization, survey_table.survey_header,
                survey_table.period_name)  %}
                <tr>
                    <td>{{ survey_table.organization }}</td>
                    <td>{{ survey_table.survey_header }}</td>
                    <td>{{ survey_table.period_name }}</td>
                    <td>{{ survey_table.completed }}</td>
                    <td>{{ survey_table.due }}</td>

                    <div><label><td BGCOLOR="{{ color }}"><input type="checkbox"  name="{{ survey_table.user_survey_section_id}}" value="{{ survey_table.user_survey_section_id  }}" title= "{{ survey_table.survey_section }}" ><label></td></div>
            {% else %}
            <div><label><td BGCOLOR="{{ color }}"><input type="checkbox"  name="{{ survey_table.user_survey_section_id}}" value="{{ survey_table.user_survey_section_id  }}" title= "{{ survey_table.survey_section }}" ></td></label></div>
            {% endif %}
          {% endfor %}
                </tr>
    </table>
    </div>
    </fieldset>
    <input class="bigbutton" type="submit" value="Submit" >
  </form>


{% endblock %}

行ごとにすべてを選択する機能を追加しようとしています。

明確にする

row 1[select all button] [ ] [ ] [ ] [ ]
row 2[select all button] [ ] [ ] [ ] [ ]

if row 1 selected all button clicked:
row 1[select all button] [x] [x] [x] [x]
row 2[select all button] [ ] [ ] [ ] [ ]

私はjqueryが初めてで、この特定のケースに向けられたプラグインまたは簡単なチュートリアルに出くわしたいと思っていました。データが表形式である必要がないため、テーブルを失う必要がある可能性があります。その場合、フィールドセットを使用して任意の数の例を使用でき ます。経験豊富な Jquery ユーザーは何を提案しますか?

4

2 に答える 2

1

Assuming the checkbox is in the same row, you want to traverse the dom path upwards to the containing tr. From there you want to find all checkboxes and mark them as checked.

$('.row-check-all-input').on('click', function(){
  $(this).parents('tr').find('input[type="checkbox"]').prop('checked', true); 
});

Example in JSFiddle: http://jsfiddle.net/2bF3D/

于 2013-04-28T06:02:50.733 に答える