0

我有一段动态调用的 jquery 代码，并生成任意数量的 tr 标签。在每个 tr 标记中，我都有一个设置为 jquery ui datepicker 的文本类型的输入。无论生成多少个 tr 标签，日期选择器都会一致地呈现除最后一个标签之外的每个 tr 标签。我错过了什么？这是负责的jquery代码：

// create order row
var addOrderRow = function(id, name) {
var self = this;
self.Name = name;
self.Id = id;


self.Output = "<tr><th>Code</th><th>Product</th><th>Options</th><th>Size</th><th>Package</th>" +
    "<th>Price</th><th>Quantity</th><th>Delivery Date</th></tr>" +
    "<tr><td><select name='prodCode'></select></td><td><select name='product'></select>" +
    "</td><td><select name='options'></select></td><td><select name='size'></select></td><td>" +
    "<select name='package'></select></td><td><select name='price'></select></td>" +
    "<td><input type='text' name='quantity'></input></td><td><input type='text' " +
    "name='deliverDate'></input>" +
    "</td></tr>";

// assign datepicker to deliverDate
$(function() {
    $("input[name=deliverDate]").datepicker({minDate: 0});
});

// populate product code
getPcodeProducts();

return self.Output;
};
4

1 回答 1

1

您似乎并没有真正调用用于分配日期选择器的函数。更不用说，在您将输出添加到 DOM 之前，“deliverDate”将无法分配。因此，该函数需要在您调用的任何内容之后才能触发 addOrderRow。但是，如果有多个具有相同名称的行，您将需要某种方法来实际定位它。连接输出中名称字段中的“id”参数，然后调用您的函数，将输出代码添加到页面并执行以下操作：

$("input[name=deliverDate"+id+"]").datepicker({minDate: 0});

在我假设是一个 for 循环中，您正在执行此操作。

在评论中添加了问题示例。注意：我没有时间测试这个，你可能需要稍微调整一下，但这是一般的想法：

<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        function addOrderRow(id, name)
        {
            return "<tr><td><input type='text' name='deliverDate'"+id+"'></input><input type='button' name='cmd'"+id+"' onclick='processRowUpdate(\'"+id+"\');'></input></td></tr>";
        }
        function processRowUpdate(id)
        {
            var deliverDate = $("input[name=deliverDate"+id+"]").val();
            alert(deliverDate);
        }
        var arrOrders = [{name:"name1", id:"1"}, {name:"name2", id:"2"}];

        for (var i = 0; i < arrOrder.length; i++)
        {
            $('#myTable > tbody:last').append(addOrderRow(arrOrder[i].name, arrOrder[i].id));
            $("input[name=deliverDate"+id+"]").datepicker({minDate: 0});
        }
    </script
</head>
<body>
    <table id="orders"></div>
</body>
</html>
于 2013-05-21T20:45:30.277 回答