如何根据添加的行数创建动态名称和回调函数

时间:2013-10-25 08:11:35

标签: javascript

我有以下表格

<form name="form1" id="form1" action="">
        <table id="dateTable">
        <tr>
            <td>


<input type="text" name="date[]" value="" style="width: 25px;">
                <input type="hidden" name="date[]" value="" style="width: 25px;">
                <input type="text" name="month[]" value="" style="width: 25px;">
                <input type="hidden" name="month[]" value="" style="width: 25px;">
                <input type="text" name="year[]" value="" style="width: 40px;">
                <input type="hidden" name="year[]" value="" style="width: 40px;">
                <button onClick="cal_date_1.showCalendar('cal_date_1'); return false;">
                    <img src="php/kantoor/templates/default/images/agenda.gif">
                </button>
                <div id="cal_date_1" class="cal_date"></div>
            </td>
            <td class="td_formfield_text"><img src="php/kantoor/templates/default/images/plus.gif" onclick="addRow();" title="Add" alt="Toevoegen prijs buiten pakket"></td>
        </tr>
    </table>
</form>

当我点击按钮时,它会显示日历。使用下面的javascript选择一个日期,月份,年份输入日期

var date = document.form1.elements["date[]"];
var month = document.form1.elements["month[]"];
var year = document.form1.elements["year[]"];

var cal_date_1 = new CalendarPopup( "cal_date_1", 0, 0);
cal_date_1.setReturnFunction( "cal_date_change_1" );
cal_date_1.setWeekStartDay(1);

function cal_date_change_1( y, m, d ) {
   date[0].value = LZ(d);
   month[0].value = LZ(m);
   year[0].value = LZ(y);
}

当我点击加号图片添加更多行时,它将运行函数

function addRow() {
    var dateTable = document.getElementById("dateTable");
    var noRow = dateTable.rows.length;
    dateTable.insertRow(-1);
    tr = dateTable.rows[noRow];
    tr.insertCell(-1);
    td = tr.cells[0];

    dateInput = document.createElement("input");
    dateInput.type = "text";
    dateInput.name = "date[]";
    dateInput.style.width = 25;

    monthInput = document.createElement("input");
    monthInput.type = "text";
    monthInput.name = "month[]";
    monthInput.style.width = 25;

    yearInput = document.createElement("input");
    yearInput.type = "text";
    yearInput.name = "year[]";
    yearInput.style.width = 40;

    td.appendChild(dateInput);
    td.appendChild(monthInput);
    td.appendChild(yearInput);

    dateButton = document.createElement("button");
    dateButton.setAttribute("id", "datum_bewerken_button_1");

    var img = document.createElement("img");
    img.src = "php/kantoor/templates/default/images/agenda.gif";
    img.style.width = 16;
    img.style.height = 15;
    img.style.border = 0;

    dateButton.appendChild(img);
    td.appendChild(dateButton);

    var div = document.createElement("div");
    div.setAttribute("id", "cal_date_" + noRow);

    for (var i = 2; i <= noRow; i++) {
        dateButton.onclick = function () {
            window['cal_date_'+i].showCalendar('cal_date_' + noRow);
            return false;
        }

        window['cal_date_'+i] = new CalendarPopup( "cal_date_" + i, 0, 0);
        window['cal_date_'+i].setReturnFunction("cal_date_change_" + i);
        window['cal_date_'+i].setWeekStartDay( 1 );
    }

}

我不知道如何设置窗口['cal_date _'+ i] .showCalendar('cal_date_'+ noRow);此代码不起作用以及如何为window ['cal_date _'+ i]创建回调函数.setReturnFunction(“cal_date_change_”+ i);

请帮帮我。提前谢谢。

0 个答案:

没有答案