Question

当用户点击表格行

时，我使用此功能弹出一个窗口

<script type="text/javascript">
    $(document).ready(function() {
        $("td.abc").click(function() {
            var t = 'Ticket ID: ' + $(this).find('td:eq(0)').html()+'\n'+'\n';
            var r = 'Subject: ' + $(this).find('td:eq(1)').html()+'\n'+'\n';
            var e = 'Messege: ' + $(this).find('td:eq(2)').html()+'\n'+'\n';
            var f = 'Developer: ' + $(this).find('td:eq(3)').html()+'\n'+'\n';
            var w = 'Current Status: ' + $(this).find('td:eq(4)').html()+'\n'+'\n';
            var q = 'Uploaded Date & Time: ' + $(this).find('td:eq(5)').html()+'\n'+'\n';

            var o = $("#79").attr("name")+'\n'+'\n';
            alert(t+r+e+f+w+q+o);

        });
    });
</script>

我的表格如下

echo "<br> <table border='0' id='example' width='980' align='center'>
<tr>
    <th width='60'>Ticket ID</th>
    <th width='150'>Subject</th>
    <th width='670'>Messege</th>
    <th width='60'>Developer</th>
    <th width='70'>Status</th>
    <th width='105'>Date - Time</th>
</tr>";

while($row = mysql_fetch_array($result)) {
    //echo $row['jobSatus'];
    echo "<tr>";
    echo "<td class=\"abc\" width='60'>" . $row['id'] . "</td>";
    echo "<td class=\"abc\" width='150'>" . $row['subject'] . "</td>";
    echo "<td class=\"abc\" width='670'>" . $row['msg'] . "</td>";
    echo "<td class=\"abc\" width='60'>" . $row['developer'] . "</td>";
    echo "<td class=\"abc\"width='60'>" . $row['jobstatus'] . "</td>";
    echo "<td class=\"abc\" width='105'>" . $row['date_time'] . "</td>";
    echo "<input class=\"abc\" type='hidden' name=".$row['image']." id=".$row['id'].">";
    echo "</tr>";
}
echo "</table>";

现在在弹出窗口中我没有得到任何值。它说“未定义”。如果有人能证明我做错了什么，我将非常感激。

Answer 1

尝试改变这个......

var t = 'Ticket ID: ' + $(this).find('td:eq(0)').html()+'\n'+'\n';

到这个

var t = 'Ticket ID: ' +$(this).closest('td:eq(0)').attr('class');

希望这会有所帮助....

Answer 2

您正在点击表格单元格，而不是表格行

$("td.abc").click(function() {
   ^^

更改它以查看表格

$("#example").on("click", "tr", function () {

或

$("#example").on("click", "tr:has(td.abc)", function () {

您的HTML标记无效，因为输入元素不能是tr的子元素。

Answer 3

在表格行上设置onclick

$("tr.ticker-row").click(function(ev) {
    var $this = $(ev.currentTarget);
    var t = 'Ticket ID: ' + $this.find('td:eq(0)').html()+'\n'+'\n';
    var r = 'Subject: ' + $this.find('td:eq(1)').html()+'\n'+'\n';
    var e = 'Messege: ' + $this.find('td:eq(2)').html()+'\n'+'\n';
    var f = 'Developer: ' + $this.find('td:eq(3)').html()+'\n'+'\n';
    var w = 'Current Status: ' + $this.find('td:eq(4)').html()+'\n'+'\n';
    var q = 'Uploaded Date & Time: ' + $this.find('td:eq(5)').html()+'\n'+'\n';
    var o = $this.find('input').attr('name') + '\n'+'\n';
    alert(t+r+e+f+w+q+o);
});

在php上，除tr

外，不要在td中插入任何节点

while($row = mysql_fetch_array($result)) {
  //echo $row['jobSatus'];
  echo "<tr class=\"ticket-row\" data-row-index=\"".$row['id']."\">";
  echo "<td class=\"abc\" width='60'>" . $row['id'] . "<input class=\"abc\" type='hidden' name=".$row['image']." ></td>";
  echo "<td class=\"abc\" width='150'>" . $row['subject'] . "</td>";
  echo "<td class=\"abc\" width='670'>" . $row['msg'] . "</td>";
  echo "<td class=\"abc\" width='60'>" . $row['developer'] . "</td>";
  echo "<td class=\"abc\"width='60'>" . $row['jobstatus'] . "</td>";
  echo "<td class=\"abc\" width='105'>" . $row['date_time'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

获取行内容到弹出窗口

3 个答案: