Question

我试图创建一个动态表，换句话说，就是每行的列数

不一定与其他行相同
可以由用户实时更改

在每个添加的列中，都包含一个下拉框，使用数据库请求填充该框。

我希望能够在页面加载时填充此下拉列表，而不是每次添加列时（对于日历都是如此，所以最坏的情况：每行多次= 31 * x）。

我使用jquery 1.9和php 5.3进行编程。 I＆＃39;已经试过用JSON和$。员额（），但这逃脱太多需要斜线和报价，而由于我的版本的PHP 5.3，我能＆＃39;吨使用＆＃34; DO_NOT_ESCAPE_ANYTHING＆＃ 34;在php 5.4+中提供的常量（是的，我知道这个名字并不是正确的，它的核心）

所以，问题的核心：

如何使用jquery和php的组合将HTML -tag放在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));
    });

});

Answer 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列的表格，在第二行中，第三个单元格将为空且无边框。你可以做的是为每一行使用一个单独的表，将宽度设置为相等，并使用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");

})

带有select的jQuery动态表

1 个答案: