-1

動的テーブル、つまり行ごとの列数が異なるテーブルを作成しようとしています

  1. 必ずしも他の行と同じではありません
  2. ユーザーがライブで変更可能

追加されたすべての列には、データベース要求を使用して入力されるドロップダウン ボックスが含まれています。

列が追加されるたびにではなく、ページが読み込まれるときにこのドロップダウンを一度入力できるようにしたいと思います（カレンダー用なので、最悪の場合：行ごとに複数回= 31 * x）。

私はプログラミングに jquery 1.9 と php 5.3 を使用しています。JSON と $.post() を試してみましたが、これは必要なスラッシュと引用符をエスケープしすぎており、php のバージョン 5.3 のため、php 5.4+ (はい、その名前が正しくないことはわかっています。暗記です）

だから、質問の核心：

jquery と php の組み合わせを使用して HTML タグを javascript 変数に配置し、jquery で処理されたボタンクリックで出力するにはどうすればよいですか。

jsfiddle: http://jsfiddle.net/pjc3y/3/

コード：

HTML:

<form name="myform" id="myForm" action="#test">
    <div>
        <table id="persCalTable">
            <tr id="DAY_0">
                <td>
                    <input type="text" name="name" size="25" value="Enter your name here!" />
                </td>
                <td>
                    <button id="eventAdder">add event</button>
                </td>
            </tr>
        </table>
        <input type="submit" value="Submit" id="submitter" />
    </div>
</form>

JavaScript:

function addCellToRow(row, cell) {
    row.append(cell);
}

function expandCalendarTable(myObj) {
    var DATA = myObj.closest('tr').attr('id').slice(4); //data is the number after DAY_
    var selector = '#persCalTable #DAY_' + DATA; //selector is the table and the clicked row id
    var cellHiddenField = '<input type="hidden" name="status" value="New" />';
    var cellOtherData = "INSERT SELECT TAG HERE";
    var cell = cellHiddenField + cellOtherData;
    addCellToRow($(selector), cell); // add the cell to the row defined by the selector
    eve.preventDefault(); // stop the page refresh(if not in a form, this is not needed, when in a form, this is needed)
    //alert('Picked: ' + DATA);
}



$(document).ready(function () {
    $("#submitter").click(

    function (e) {
        e.preventDefault();
        alert($('#myForm').serialize());

    });
    $("[id^=eventAdder]").click(

    function (e) {

        e.preventDefault();

        expandCalendarTable($(this));
    });

});
4

1 に答える 1

1

HTML テーブルの行ごとに異なる列を使用できますが、次の場合:

<table>
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</table>

最終的には 3 列の表ができ、2 行目の 3 番目のセルは空で縁なしになります。できることは、各行に個別のテーブルを使用し、幅を等しく設定し、jQuery を使用して手動でセル幅を計算して設定することです。

カレンダーも。選択するよりも優れたカレンダー コントロールまたは同様のライブラリを備えた JQueryUi を使用することをお勧めします。どちらの方法でも、事前にオブジェクトを準備して、変数に格納できます。次に、クローンを使用する必要があります。そうしないと、最後に挿入した場所に移動します。

$(function(){

    // Prepare the select (obviously yours would be more complicated)

    var select = $("<select>");
    <?php for( $i = 0; $i < count($optionValue); $i++ ) { ?>
    select.append($("<option value='<?php echo $optionValue[$i]?>'><?php echo $optionText[$i]?></option>"));
    <?php } ?>

    // Insert into relevant parts
    $("#insert1").append(select.clone());
    $("#insert1 select").attr("name", "select1");

    $("#insert2").append(select.clone());
    $("#insert2 select").attr("name", "select2");

})
于 2013-08-14T12:39:06.000 に答える