How to make only one column of a table clickable












0















I am trying to make a table cell clickable so that I can extract the cell value (member ID)and submit it to the server then re-direct the user to a new page displaying that member's profile data. I have used the following code to delegate the cells of the table as clickable, but it makes all cells clickable and I only want the first column of cells to be clickable.



The cell data for the ID is:



<td align="center" class="member_id" id="member_id" >
<?php echo $wpdb->get_var( "SELECT * FROM $table_name ORDER BY $table_name.`last_name` ASC ", 0, $cur_row); ?>
</td> <!--- ID --->


The JS file is:



$jq("#mem_dir").delegate("td", "click", function() {
alert("Clicked on a cell");
if ($jq(this).hasClass("member_id")) {
alert("Clicked on a member ID");
var member_id = $jq(this).text();
alert ("Member ID is: " + member_id);
}


I would really like to do what I did for the email address cell data, but have not figured out how to do that.



Clickable email cell data:



<td><?php echo make_clickable($wpdb->get_var( "SELECT * FROM $table_name ORDER BY $table_name.`last_name` ASC ", 3, $cur_row)); ?></td> <!--- email --->


Thanks for any help or suggestions.










share|improve this question



























    0















    I am trying to make a table cell clickable so that I can extract the cell value (member ID)and submit it to the server then re-direct the user to a new page displaying that member's profile data. I have used the following code to delegate the cells of the table as clickable, but it makes all cells clickable and I only want the first column of cells to be clickable.



    The cell data for the ID is:



    <td align="center" class="member_id" id="member_id" >
    <?php echo $wpdb->get_var( "SELECT * FROM $table_name ORDER BY $table_name.`last_name` ASC ", 0, $cur_row); ?>
    </td> <!--- ID --->


    The JS file is:



    $jq("#mem_dir").delegate("td", "click", function() {
    alert("Clicked on a cell");
    if ($jq(this).hasClass("member_id")) {
    alert("Clicked on a member ID");
    var member_id = $jq(this).text();
    alert ("Member ID is: " + member_id);
    }


    I would really like to do what I did for the email address cell data, but have not figured out how to do that.



    Clickable email cell data:



    <td><?php echo make_clickable($wpdb->get_var( "SELECT * FROM $table_name ORDER BY $table_name.`last_name` ASC ", 3, $cur_row)); ?></td> <!--- email --->


    Thanks for any help or suggestions.










    share|improve this question

























      0












      0








      0








      I am trying to make a table cell clickable so that I can extract the cell value (member ID)and submit it to the server then re-direct the user to a new page displaying that member's profile data. I have used the following code to delegate the cells of the table as clickable, but it makes all cells clickable and I only want the first column of cells to be clickable.



      The cell data for the ID is:



      <td align="center" class="member_id" id="member_id" >
      <?php echo $wpdb->get_var( "SELECT * FROM $table_name ORDER BY $table_name.`last_name` ASC ", 0, $cur_row); ?>
      </td> <!--- ID --->


      The JS file is:



      $jq("#mem_dir").delegate("td", "click", function() {
      alert("Clicked on a cell");
      if ($jq(this).hasClass("member_id")) {
      alert("Clicked on a member ID");
      var member_id = $jq(this).text();
      alert ("Member ID is: " + member_id);
      }


      I would really like to do what I did for the email address cell data, but have not figured out how to do that.



      Clickable email cell data:



      <td><?php echo make_clickable($wpdb->get_var( "SELECT * FROM $table_name ORDER BY $table_name.`last_name` ASC ", 3, $cur_row)); ?></td> <!--- email --->


      Thanks for any help or suggestions.










      share|improve this question














      I am trying to make a table cell clickable so that I can extract the cell value (member ID)and submit it to the server then re-direct the user to a new page displaying that member's profile data. I have used the following code to delegate the cells of the table as clickable, but it makes all cells clickable and I only want the first column of cells to be clickable.



      The cell data for the ID is:



      <td align="center" class="member_id" id="member_id" >
      <?php echo $wpdb->get_var( "SELECT * FROM $table_name ORDER BY $table_name.`last_name` ASC ", 0, $cur_row); ?>
      </td> <!--- ID --->


      The JS file is:



      $jq("#mem_dir").delegate("td", "click", function() {
      alert("Clicked on a cell");
      if ($jq(this).hasClass("member_id")) {
      alert("Clicked on a member ID");
      var member_id = $jq(this).text();
      alert ("Member ID is: " + member_id);
      }


      I would really like to do what I did for the email address cell data, but have not figured out how to do that.



      Clickable email cell data:



      <td><?php echo make_clickable($wpdb->get_var( "SELECT * FROM $table_name ORDER BY $table_name.`last_name` ASC ", 3, $cur_row)); ?></td> <!--- email --->


      Thanks for any help or suggestions.







      cell clickable






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 28 '18 at 21:00









      LCSFLCSF

      22




      22
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Actually, this was far simpler than I had thought. I simply changed the selector of the delegate method to be the class of the column of interest:



          $jq("#mem_dir").delegate(".member_id", "click", function() {
          var member_id = $jq(this).text();
          var member_id = member_id.trim();
          alert ("ID is: " + member_id);


          With a little CSS on the class to create a pointer when hovering over the cell all worked fine:



          #member_id {
          color: blue;
          text-decoration: underline;
          cursor: pointer;
          }





          share|improve this answer
























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53528014%2fhow-to-make-only-one-column-of-a-table-clickable%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            Actually, this was far simpler than I had thought. I simply changed the selector of the delegate method to be the class of the column of interest:



            $jq("#mem_dir").delegate(".member_id", "click", function() {
            var member_id = $jq(this).text();
            var member_id = member_id.trim();
            alert ("ID is: " + member_id);


            With a little CSS on the class to create a pointer when hovering over the cell all worked fine:



            #member_id {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
            }





            share|improve this answer




























              0














              Actually, this was far simpler than I had thought. I simply changed the selector of the delegate method to be the class of the column of interest:



              $jq("#mem_dir").delegate(".member_id", "click", function() {
              var member_id = $jq(this).text();
              var member_id = member_id.trim();
              alert ("ID is: " + member_id);


              With a little CSS on the class to create a pointer when hovering over the cell all worked fine:



              #member_id {
              color: blue;
              text-decoration: underline;
              cursor: pointer;
              }





              share|improve this answer


























                0












                0








                0







                Actually, this was far simpler than I had thought. I simply changed the selector of the delegate method to be the class of the column of interest:



                $jq("#mem_dir").delegate(".member_id", "click", function() {
                var member_id = $jq(this).text();
                var member_id = member_id.trim();
                alert ("ID is: " + member_id);


                With a little CSS on the class to create a pointer when hovering over the cell all worked fine:



                #member_id {
                color: blue;
                text-decoration: underline;
                cursor: pointer;
                }





                share|improve this answer













                Actually, this was far simpler than I had thought. I simply changed the selector of the delegate method to be the class of the column of interest:



                $jq("#mem_dir").delegate(".member_id", "click", function() {
                var member_id = $jq(this).text();
                var member_id = member_id.trim();
                alert ("ID is: " + member_id);


                With a little CSS on the class to create a pointer when hovering over the cell all worked fine:



                #member_id {
                color: blue;
                text-decoration: underline;
                cursor: pointer;
                }






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 29 '18 at 23:32









                LCSFLCSF

                22




                22
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53528014%2fhow-to-make-only-one-column-of-a-table-clickable%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Lallio

                    Unable to find Lightning Node

                    Futebolista