当我单击TR时如何获取隐藏的TD值

Question

im trying to make a task manger based on web system that can monitor tasks at work , im using html and php . im trying to show all the tasks in table and when i click on a task (row) i want to get a hidden td value (id of task) and send it as arg to another page for more information about the task . i searched the web how can i do that , but i didnt realy understand how to do it with my table . here is my table code

                   <table id="thickets_show">
                    <tr id="show_ticket_table_header">
                        <td>Work Week</td>
                        <td>Task Submited Date</td>
                        <td>Task Submited Time</td>
                        <td>Task</td>
                        <td>Project</td>
                        <td>Task Owner</td>
                        <td>Task Assigend to</td>
                        <td>Priority</td>
                        <td>Status</td>
                        <td>Task Total Work Time</td>
                        <td>Task Due Date</td>
                        <td>Task Finish Date</td>
                        <td>Team</td>
                    </tr>';
                    foreach ($tasks as $key => $value) {
                        if ($value['ticket_status']=="done")
                            echo '<tr id="done_ticket" >';
                        elseif ($value['ticket_priority']=="high")
                             echo '<tr id="high_ticket" class="ticket_raw">';
                        else
                            echo '<tr class="ticket_raw">';
                        echo '
                                <td>
                                    '.$value['work_week'].'
                                </td>
                                <td>
                                    '.$value['ticket_date'].'
                                </td>
                                <td>
                                    '.$value['ticket_time_submit'].'
                                </td>
                                <td>
                                    '.$value['ticket_request'].'
                                </td>
                                <td>
                                    '.$value['ticket_project'].'
                                </td>
                                <td>
                                    '.$value['ticket_onwer'].'
                                </td>
                                <td>
                                    '.$value['ticket_assigned_user'].'
                                </td>
                                <td>
                                    '.$value['ticket_priority'].'
                                </td>
                                <td>
                                    '.$value['ticket_status'].'
                                </td>
                                <td>
                                    '.$value['ticket_worktime'].'
                                </td>
                                <td>
                                    '.$value['ticket_due_date'].'
                                </td>
                                <td>
                                    '.$value['ticket_finish_date'].'
                                </td>
                                <td>
                                    '.$value['team'].'
                                </td>
                                <td style="display:none;" id="ticket_id class="divOne">
                                    '.$value['id'].'
                                </td>
                              </tr>

this is the function that im using

$(function(){
            $(".ticket_raw" ).on(\'click\',function(e){
                e.preventDefault();
                var id = $(this).attr("#ticket_id");
                alert(id);
            });
        });

Answer 1

The td has the id ticket_id , so you can use document.getElementById() :

var td = document.getElementById('ticket_id');
var value = td.textContent;

Or, using jQuery:

var td = $('#ticket_id');
var value = td.text();

Answer 2

There is a small issue to correct, then you can make this work nice and easily:

echo '<tr id="done_ticket" >'; is invalid - if you're creating multiple elements in a loop like this, you can't give them all the same "id", that's illegal in the HTML specification. You have to use classes instead.

Rewrite it slightly like this:

foreach ($tasks as $key => $value) {
  echo '<tr data-id="'.$value['id'].'" class="ticket ';
  if ($value['ticket_status']=="done")
    echo 'done_ticket';
  elseif ($value['ticket_priority']=="high")
     echo 'high_ticket ticket_raw';
  else
    echo 'ticket_raw';
  echo '">';
  echo '
    <td>
    //etc...

Note the extra class "ticket" on the tr element, regardless of the status, and the "data-id" attribute containing the ID (instead of a hidden field).

Now, you can write some jQuery to get the ticket ID:

$(".ticket").click(function(event) {
  var id = $(this).data("id"); //gets the data-id value from the clicked tr
  window.location.href = "ticket.php?id=" + id; //example URL to redirect to, passing the ID from the tr
});

Lastly you can delete this code:

<td style="display:none;" id="ticket_id class="divOne">
  '.$value['id'].'
</td>

Answer 3

 $('tr').on('click',function(){ var hidden_items = $(this).find('.td_hidden'); $.each(hidden_items,function(k,v){ console.log($(v).text()); }) }) 

 html,body{ height: 100%; margin: 0 auto; padding: 0px; } td{ border:1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <body> <table> <tr> <td>COLUMN1</td> <td>COLUMN2</td> <td>COLUMN3</td> <td>COLUMN4</td> </tr> <tr> <td>VALUE01</td> <td>VALUE02</td> <td>VALUE03</td> <td>VALUE04</td> <td style="display:none;" class="td_hidden">VALUE_HIDDEN_01</td> <td style="display:none;" class="td_hidden">VALUE_HIDDEN_02</td> </tr> <tr> <td>VALUE11</td> <td>VALUE12</td> <td>VALUE13</td> <td>VALUE14</td> <td style="display:none;" class="td_hidden">VALUE_HIDDEN_11</td> <td style="display:none;" class="td_hidden">VALUE_HIDDEN_12</td> </tr> </table> </body>