-2

ここに画像の説明を入力

こんにちは、上の画像でわかるように、プロジェクトで使用する単純なカレンダーを作成しています。

テーブルの HTML:

<table>
<tr><th>time</th><th>2012-12-23</th>etc..</tr>
<tr><th>09:00AM</th><td></td><td></td>etc...</tr>

ii jquery(selectable) を使用して、それらの td を選択可能にします。

私の質問:ユーザーが [保存] をクリックしてフォーム データを php ファイルに投稿すると、選択した td の日付と時刻を含めるにはどうすればよいですか?

例：ユーザーが今すぐ保存をクリックすると（画像の上）、「2012-12-24 12:00 PM」が送信されます

問題を解決した「raina77ow」の回答。

しかし、コメントと私の-ve投票から、私の質問は詳細が不足していると思うので、物事を明確にするためにコードを追加しました:0

HTML

  <FORM id='booking_form'>
A form that u see above in img</form><a id='save'>save</a>
        <h1>Week Calendar</h1>
        <div class="body">
            <table id='schedule'>
                <thead>
                <tr><th>Time</th><?foreach($cal[0] as $d)echo "<th>$d</th>";//$cal[0]contain week days starting from today?></tr>
                </thead>
                <?//create our table by nice clean loop
                $start_time = "09:00:00";
            $end_time = "20:00:00";
            while(strtotime($start_time) <= strtotime($end_time)){?>
            <tr>
                <th><?=date("h:i A", strtotime($start_time));?></th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <?
            $start_time = date("H:i:s", strtotime("$start_time +60 minutes"));
            }//end while
            ?>

            <tr></tr>
    </table>

保存ボタンをクリックしたときのJS

var datas=$('#booking_form').serialize();
        var request = $.ajax({
                        url: "./booking/add",
                        type: "POST",
                        data: datas,
                        dataType: "html"
                        });

        request.done(function(msg) {$info.html( msg );});
        request.fail(function(jqXHR, textStatus) {$info.html( "<div id='error'>" + textStatus +"</div>");});
        request.success(function(data){$info.html(data);});
        return false;

そして、これが私の質問でした。選択したフィールドの日時をそのajax投稿に追加する方法です。ご回答ありがとうございます。 #booking_form name=date と name=time に 2 つの非表示の入力を追加することを思いつき、それらに値を追加する選択オプションを追加しました。

    $schedule.selectable({
    filter: 'td',
    selected: function( event, ui ) {
        var time = $(ui.selected).parent().children(':first').text();
            date = $(ui.selected).closest('table').children(':first').find('th').eq($(ui.selected).index()).text();
        $('#booking_form').find('[name=date]').val(date);
        $('#booking_form').find('[name=time]').val(time);
    }
    });

私はこれが最良の答えだと思います

4

3 に答える 3

2

クリックされた行の最初のセルであるため、時間を取得するのは非常に簡単です。「日付」列を取得するには、indexメソッドを使用できます。

$('td').click(function() {
  var $cell = $(this);
    time = $cell.parent().children(':first').text();
    date = $cell.closest('table').children(':first').find('th').eq($cell.index()).text();
    alert(date + ' ' + time);
});​

JSフィドル。

于 2012-12-23T17:01:31.597 に答える
2

これを試して：

$('td').click(function() {
    var $td = $(this);
    var $th = $td.closest('table').find('th').eq($td.index());

    // Get the header text...
    alert($th.text());

    var $firstTD = $td.closest('tr').find('td:first');

    // Get the first td text...
    alert($firstTD.text());
});​
于 2012-12-23T17:06:11.183 に答える
1

プレーンな JavaScript だけで、 を取得する<td>と、次を取得できます。

var time = td.parentNode.cells[0].firstChild.nodeValue,
    date = td.parentNode.parentNode.rows[0].cells[td.cellIndex].firstChild.nodeValue;
于 2012-12-23T17:01:42.483 に答える