Question

我的网站上有实时搜索功能，我希望用户能够选择结果，并将值传递给输入字段。

如果我有一个静态表，下面的代码工作正常，但如果我从mysql表执行搜索，它找不到行。我只能从整个表中选择值。有什么想法吗？

来自静态表 - 这项工作很精细

    <table class="formatHTML5" >

        <!-- TABLE HEADER-->
        <thead>

            <tr>
                <th>Loan</th><th>Month</th><th>Rate</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="p">Loan</td><td class="i">36</td><td class="n">.02881</td><td class="z">.02881</td>
            </tr>
            <tr>
                <td class="p">Loan</td><td class="i">36</td><td class="n">.02751</td><td class="z">.02881</td>
             </tr>

        </tbody>
     </table>


 <script>
 $("tbody tr").click(function () {
        $('.selected').removeClass('selected');
        $(this).addClass("selected");
        var product = $('.p',this).html();
        var infRate =$('.i',this).html();
        var note =$('.n',this).html();
        var gnote =$('.z',this).html();
        alert(product +','+ infRate+','+ note);
    });
     </script>

从实际搜索 - 这不起作用

      index.php
                <div class="row mt">
                    <div class="col-lg-12">
                        <div class="content-panel tablesearch">

                            <section id="unseen">
                                <table id="resultTable" class="table table-bordered table-hover table-condensed formatHTML5">
                                    <thead>

                                        <tr>

                                            <th class="small">Name</th>
                                            <th class="small">Company</th>
                                            <th class="small">Zip</th>
                                            <th class="small">City</th>

                                        </tr>
                                    </thead>

                                    <tbody>

                                    </tbody>
                                </table>
                            </section>

                        </div><!-- /content-panel -->
                    </div><!-- /col-lg-4 -->
                </div><!-- /row -->


  search.php

  // Output HTML formats

  $html = '<tr>';
  $html .= '<td class="small">nameString</td>';
  $html .= '<td class="small">compString</td>';
  $html .= '<td class="small">zipString</td>';
  $html .= '<td class="small">cityString</td>';
  $html .= '</tr>';

// Check for results
    if (isset($result_array)) {
    foreach ($result_array as $result) {
    // Output strings and highlight the matches
     $d_name = preg_replace("/".$search_string."/i", "<b>".$search_string."</b>", $result['name']);
     $d_comp = $result['company'];
     $d_zip = $result['zip'];
     $d_city = $result['city'];
    // Replace the items into above HTML
    $o = str_replace('nameString', $d_name, $html);
    $o = str_replace('compString', $d_comp, $o);
    $o = str_replace('zipString', $d_zip, $o);
    $o = str_replace('cityString', $d_city, $o);
    // Output it
    echo($o);
        }
    }else{
    // Replace for no results
    $o = str_replace('nameString', '<span class="label label-danger">No Names Found</span>', $html);
    $o = str_replace('compString', '', $o);
    $o = str_replace('zipString', '', $o);
    $o = str_replace('cityString', '', $o);
    // Output
    echo($o);
   }
   }

Answer 1

请尝试使用以下代码：

<script type="text/javascript">
    $(document).ready(function(){
     $(document).on("click", "tbody tr",function () {
            $('.selected').removeClass('selected');
            $(this).addClass("selected");
            var product = $('.p',this).html();
            var infRate =$('.i',this).html();
            var note =$('.n',this).html();
            var gnote =$('.z',this).html();
            alert(product +','+ infRate+','+ note);
        });
    });
    </script>

直接分配.click()事件处理程序需要HTML DOM结构中存在特定元素。但是，如果在事件侦听器分配时不存在该特定元素，则它将不会被执行。如果您知道将来DOM中将存在任何特定元素，那么我们通常会采用event委派技术。在这种技术中，我们将事件监听器附加到document而不是实际的DOM元素。因此，在点击元素事件时，首先通过document进行侦听，然后委托给实际的DOM元素。

Jquery从表中选择行来获取值

1 个答案: