Question

我有这个html表：

<table class="table" id="requestTable">
  <thead class="text-primary">
    <th>Id</th>
    <th>موضوع درخواست</th>
    <th>نوع درخواست</th>
    <th>نام رابط شرکت</th>
  </thead>
  <tbody>
    <tr class="row">
      <td>@item.Id</td>
      <td>@item.subjects</td>
      <td>@item.requesttype</td>
      <td>@item.interfacename</td>
    </tr>
  </tbody>
</table>

并编写此jquery代码：

<script src="~/scripts/jquery-3.1.1.min.js"></script>
<script>
  $('#requestTable tr').hover(function () {
    $(this).addClass('hover');
  }, function () {
    $(this).removeClass('hover');
  });

  $(document).ready(function() {
    $("#requestTable tr").click(function() {
      alert("You clicked my <td>!" + $(this).html() + 
            "My TR is:" + $(this).parent("tr").html());
      //get <td> element values here!!??
    });
  });
</script>

但是当我尝试点击该行时，请不要收到任何警报。

Answer 1

我在代码中做了一些更改。

<强>的变化：

Jquery参考
点击活动

HTML：

<html>
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $('#requestTable tr').hover(function () {
        $(this).addClass('hover');
    }, function () {
        $(this).removeClass('hover');
    });

    $(document).ready(function () {
        $("#requestTable tr td").click(function () {
            alert("You clicked my <td>! " + $(this).html() +
                  " My TR is:" + jQuery(this).closest('tr').text());

        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <table class="table" id="requestTable">
            <thead class="text-primary">
                <th>Id</th>
                <th>ID</th>
                <th>Subject</th>
                <th>Request Type</th>
            </thead>
            <tbody>
                <tr class="row">
                    <td>@item.Id</td>
                    <td>@item.subjects</td>
                    <td>@item.requesttype</td>
                    <td>@item.interfacename</td>
                </tr>
                  <tr class="row">
                    <td>@item.Id 1</td>
                    <td>@item.subjects 1</td>
                    <td>@item.requesttype 1</td>
                    <td>@item.interfacename 1</td>
                </tr>
                  <tr class="row">
                    <td>@item.Id 2</td>
                    <td>@item.subjects 2</td>
                    <td>@item.requesttype 2</td>
                    <td>@item.interfacename 2</td>
                </tr>
            </tbody>
        </table>
    </div>
</form>

希望这对你有用。如果您仍然遇到任何问题，请告诉我。我会尝试解释。

Answer 2

你确定jquery已正确加载吗？我的猜测是jquery无法使用〜/或在该位置不存在来解析

这个小提琴似乎警觉得当。 https://jsfiddle.net/o5aj1nww/

尝试用此

替换脚本标记

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

Answer 3

您可以尝试以下方法：

<script type='text/javascript'>
  $('#request table tr').find('tr').click( function(){
    var row = $(this).find('td:first').text();
    alert("You clicked my <td>!" + $(this).html() + 
    "My TR is:" + $(this).parent("tr").html());
  });
</script>

为什么在html表行点击时无法获得警报？

3 个答案: