-1

我正在尝试创建一个动态表，换句话说，一个表，其中每行的列数

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

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

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

我正在使用 jquery 1.9 和 php 5.3 进行编程。我已经尝试过使用 JSON 和 $.post()，但这会避开太多需要的斜杠和引号，并且由于我的 php 版本 5.3，我无法使用 php 5.4+ 中提供的“DO_NOT_ESCAPE_ANYTHING”常量（是的，我知道那个名字不对，是用心写的）

所以，问题的核心：

如何使用 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 列的表格，在第二行中，第三个单元格将为空且无边框。您可以做的是为每一行使用单独的表格，将宽度设置为相等，然后使用 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 回答