Jquery UI datepicker在除了最后一个之外的每个tr中呈现

I have a piece of jquery code that gets dynamically called, and generates any number of tr tags. In each tr tag I have an input of type text set to the jquery ui datepicker. The datepicker will render in every tr tag except the last one consistently no matter how many tr tags are generated. What am I missing? Here is the responsible jquery code:

我有一段动态调用的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;
};

1 个解决方案

#1

You don't appear to be actually calling the function you use to assign the datepicker. Not to mention, "deliverDate" won't be available to assign to until you add the output to the DOM. So that function needs to come after whatever you're calling to fire the addOrderRow. But then, you'll need some way to actually target it if there are multiple rows with the same name. Concatenate the "id" parameter in the name field in your output, then call your function, add your output code to the page and do:

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

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

in what I assume is a for loop you're doing this in.

在我所假设的是一个for循环你正在这样做。

Added example for question in comment. Note: I don't have time to test this, you might have to tweak it a bit, but this is the general idea:

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

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

#1

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