Question

我有一段动态调用的jquery代码，并生成任意数量的tr标签。在每个tr标签中，我都有一个类型为text的输入设置为jquery ui datepicker。无论生成多少个tr标记，datepicker都将在每个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;
};

Answer 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>

Jquery UI datepicker在除了last之外的每个tr中呈现

1 个答案: