javascript - for 循环在自动完成内不起作用

Question

<script type="text/javascript">
jQuery(document).ready(function($){
    for($i=1; $i<=15; $i++) {
        $("#sr_no"+$i).autocomplete({
            source: "autocomplete/taka.php",
            minLength: 1,
            select: function(event, ui) {
                $("#sr_no"+$i).val(ui.item.sr_no);
                $("#design_name"+$i).val(ui.item.design_name);
                $("#color"+$i).val(ui.item.color);
                $("#meter"+$i).val(ui.item.meter);
                $("#weight"+$i).val(ui.item.weight);    
            }
        });
     }
});
</script>

<?php
print("<table id='expense_table' cellspacing='0' cellpadding='0' border='1'>");
    print("<thead>");
        print("<tr>");
            print("<th>No</th>");
            print("<th>Sr. No</th>");
            print("<th>Design Name</th>");
            print("<th>Color</th>");
            print("<th>Meter</th>");
            print("<th>Weight</th>");
            print("<td>&nbsp;</td>");
        print("</tr>");
    print("</thead>");
    print("<tbody>");
    for ($i=1; $i<=15; $i++) {
        print("<tr>");
            print("<td>$i</td>");
            print("<td><input type='text' name='sr_no[$i]' maxlength='21' id='sr_no$i' /></td>");
            print("<td><input type='text' name='design_name[$i]' maxlength='21' id='design_name$i'  /></td>");
            print("<td><input type='text' name='color[$i]' maxlength='21' id='color$i' /></td>");
            print("<td><input type='text' name='meter[$i]' class='meter' maxlength='21' id='meter$i' /></td>");
            print("<td><input type='text' name='weight[$i]' maxlength='21' class='weight' id='weight$i' size='10' /></td>");                            
        print("</tr>");
    }
?>

for 循环不起作用。我正在获取数据。仅显示 sr_no 详细信息，没有其他详细信息出现。

for 循环在自动完成内不起作用。以下行不起作用:

$("#sr_no"+$i).val(ui.item.sr_no); 
$("#design_name"+$i).val(ui.item.design_name);
$("#color"+$i).val(ui.item.color);
$("#meter"+$i).val(ui.item.meter);
$("#weight"+$i).val(ui.item.weight);

eg:
table look like this 
sr_no design_name color meter weight
25        test     red   100    15
26        test2    pink  120    17

my code show detail but on click only sr_no display in input field

25       null      null  null null   (null mean nothing showing)

Answer 1

您应该将 JSON 对象数据从 php 文件返回到源，例如 php 文件必须返回如下内容:

<?php
$values = array(
    "Sr. No" => "val-1",
    "Design Name" => "val-2",
    "Color" => "val-3",
    "Meter" => "val-4",
    "Weight" => "val-5"
);
echo json_encode($values);

？>

然后你必须制作 ajax call到 php 文件并从 javascript 文件渲染表格，如下所示:

            var $table = $('<table>');
        $table.append('<caption></caption>')
        // thead
            .append('<thead>').children('thead')
            .append('<tr />').children('tr').append('<th>No</th><th>Sr. No</th><th>Design Name</th><th>Color</th><th>Meter</th><th>Weight</th>');

        //tbody
        var $tbody = $table.append('<tbody />').children('tbody');
            // add row
            $tbody.append('<tr />').children('tr:last')
                .append("<td>values[i]</td>")
                .append("<td>val</td>")
                .append("<td>val</td>")
                .append("<td>val</td>");
        }
        // add table to dom
        $table.appendTo('#myTable');
    <div id="myTable"></div>

看看这个作为引用link