jQuery从表中选择行以获取值

Question

I have a live search feature on my site and i want users to be able to select the results and the values be passed down to an input field.

If i have a static table, the code below works fine but if i perform a search from an mysql table, its not finding the rows. I can only select the values from the entire table. Any ideas?

From Static Table - THIS WORKS FINE

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

FROM LIVE SEARCH - THIS DOES NOT WORK

      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

Can you please try with following code:

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

Directly assigning .click() event handler needs that particular element be present in HTML DOM structure. But if that particular element is not present at the time of event listener assignment then it will not get executed. If you know any particular element will exist in DOM in future then we generally go for event delegation technique. In this technique we attach the event listener to document instead of actual DOM element. So on clicking on element event first gets listen by document and then delegated to actual DOM element.