如何点击TR

时间:2017-06-06 08:34:42

标签: javascript php jquery html

我试图基于可以监视工作中的任务的网络系统制作任务管理器,我使用html和php。 我试图显示表中的所有任务,当我点击一个任务(行)时,我想获得一个隐藏的td值(任务的id)并将其作为arg发送到另一个页面以获取有关该任务的更多信息。 我在网上搜索我怎么能这样做,但我真的不明白如何用我的表做。 这是我的表格代码

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

这是我使用

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

3 个答案:

答案 0 :(得分:0)

td的ID为ticket_id,因此您可以使用document.getElementById()

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

或者,使用jQuery:

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

答案 1 :(得分:0)

要纠正一个小问题,那么你可以很容易地做到这一点:

echo '<tr id="done_ticket" >';无效 - 如果您在这样的循环中创建多个元素,则无法为它们提供所有相同的内容&#34; id&#34;,&#39;在HTML规范中是非法的。你必须改用类。

稍微改写一下:

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

请注意额外的课程#34;门票&#34;在tr元素上,无论状态如何,&#34; data-id&#34;包含ID的属性(而不是隐藏字段)。

现在,您可以编写一些jQuery来获取故障单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
});

最后,您可以删除此代码:

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

答案 2 :(得分:0)

&#13;
&#13;
$('tr').on('click',function(){
	var hidden_items = $(this).find('.td_hidden');
	$.each(hidden_items,function(k,v){
		console.log($(v).text());
	})
})
&#13;
html,body{
	height: 100%;
	margin: 0 auto;
	padding: 0px;
}
td{
	border:1px solid black;
}
&#13;
<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>
&#13;
&#13;
&#13;