1

テーブルのセルで多数の選択を反復しようとしています (フォームではありません)。押されたときに送信ボタンがあり、AJAX と PHP を介してサーバーに渡す各選択リストの値と ID を取得することになっています。私のテーブルは、コースの学生のテーブルです。テーブルには、学生の名前と、コース内のレッスンへの出席が含まれています。

これは Pastebin と jsFiddle に関する私の表です。http://pastebin.com/NvRAbC7mおよびhttp://jsfiddle.net/4UheA/

このテーブルは完全に動的であることに注意してください。いいえ。行とその中の情報は動的に駆動されます。

これは、私が今 jQuery でやろうとしていることです。私の JavaScript スキルである論理または完全なナンセンスを許してください。私は実際に私が何をしているのか分かりません。試行錯誤しているだけです。

$('#saveAttendances').live('click', function()
{
    var attendSelect = $('.attendSelect');
    var students = new Array();
    //get select list values and id. 
    for(var i in attendSelect)
    {
        students['student_id'] += attendSelect[i].id;
        students['student_id']['attedance'] += attendSelect[i].value;
        console.log(students['student_id']);
    }
    //after retrieving values, post them through ajax
    // and update the attendances of students in PHP
    $.post("",{ data: array }, function(msg)
    {
         alert(msg);
    }); 

});

各選択リストの値と ID を取得して AJAX に渡すにはどうすればよいですか?

4

5 に答える 5

2

編集

jQuery の粒度に反し、無効な HTML を使用することに固執する場合は、次のような適切な解決策があります。

$(function() {
    $('button').click(function(){
       var data = $(".attendSelect").wrap('<form/>').serialize();
       $.post('process.php', data, function(response){ ... });
       return false;            
    });
});​

言及する価値があるのは、.on()この例は空想や.live()呼び出しに依存していないことです。ただし、これには、以下で説明するように、要素に適切なname属性を設定する必要があります。<select>これにより、無効な数値id属性の問題も解決されます。

ここでjsFiddleで動作するのを見てください

元の回答

まず、HTML に小さな変更を加えます。<select>要素を<form>タグでラップする必要があります。form タグを使用すると、探している正確な機能であるjQuery の.serialize()メソッドにアクセスできます。個人的には、独自のフォームをシリアル化するのではなく、jQuery Way™ を使用することをお勧めします。なぜ車輪を再発明するのですか？

次に、td一意でない ID があります。classの代わりに属性を使用するようにそれらを更新しましょうid。例えば、

<td class="studentName">Aaron Colman</td>

第 2 に、要素はフォーム処理を簡単にする属性<select>の恩恵を受けることができます。name

<select class="attendSelect" name="students[241]">
    ...

<select class="attendSelect" name="students[270]">
    ...

<select class="attendSelect" name="students[317]">
    ...

最後に、jQuery.serialize()が勝利のチケットになるでしょう。

​$(function() {
    $('form').submit(function(){
       $.post('process.php', $(this).serialize(), function(response){ ... });
       return false;            
    });
});​

送信すると、シリアル化された文字列は次のようになります

students[241]=Late&students[270]=Absent&students[317]=default

ここでjsFiddleで動作するのを見てください

于 2012-04-04T18:48:48.133 に答える
1

スクリプトに渡すことができるオブジェクトを構築するjQueryは次のとおりです。

$('button').click(function() {
    var attendance = new Object;
    $('select').each(function() {
        attendance[$(this).attr('id')] = $(':selected', this).text();
    })
});​

jsFiddleの例。

これにより、次のようになります。{241:"Late",270:"Absent",317:"Late"}

于 2012-04-04T18:58:55.633 に答える
1

編集:selectの代わりに反復するように更新されましたtr。

おそらく、以下のようなものが必要です。

デモ

var $attendSelect  = $('#tutorTable tbody tr select');
var students = {};

$attendSelect.each (function () { //each row corresponds to a student               
    students[$(this).attr('id')] = $(this).val();
});

これにより、以下のようなオブジェクトが得られます。

students = { '241': 'Late', '270': 'Absent', '317': 'default' };

上記が目的の構造でない場合は.each、コード内の関数を変更してください。

例:以下のような構造の場合、

students = [{ '241': 'Late'}, {'270': 'Absent'}, {'317': 'default'}];

コードを少し変更する必要があります。

 var students = [];
 ...
 ...
 students.push({$dd.attr('id'): $dd.val()});
于 2012-04-04T18:50:56.697 に答える
1 
var $select = $('.attendSelect'),
    students = [];
$('body').on('click', '#saveAttendances', function() {
    $select.each(function(k, v) {
        students[k] = {
            student_id : $(this).attr('id'),
            attedance  : $(this).val()
        };
    });
    console.log(students);
});
于 2012-04-04T19:01:36.583 に答える
1

live()は jQuery 1.7 で廃止されました。on()代わりに使用してください

http://api.jquery.com/on/

学生は配列なので、できるとは思いません。students['student_id']学生の配列をプッシュしたい場合は、次のことができます。

$('#saveAttendances').on('click', function() {
    var students = [];

    // iterate through <select>'s and grab key => values
    $('.attendSelect').function() {
        students.push({'id':$(this).attr('id'), 'val':$(this).val()});
    });

    $.post('/url.php', {data: students}, function() { // do stuff });
});

あなたのphpで：

var_dump($_POST); // see what's inside :)

@nathan がコメントで述べたように、ID の最初の文字として数字を使用し'student_<?php echo $id ?>'ないでください。代わりに、.each()ループ内で使用できます。

students.push({'id':$(this).attr('id').replace('student_', ''), 'val':$(this).val()});
于 2012-04-04T18:44:17.503 に答える