javascript - 无法使表格行可单击

Question

我有一个表格，如下面的代码片段所示:

#myTable {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #ddd;
}

#myTable th {
	text-align: left;
	padding: 10px;
	font-size: 16px;
}

#myTable td {
	text-align: left;
	padding: 10px;
	font-size: 14px;
}

#myTable tr {
	border-bottom: 1px solid #ddd;
}

#myTable tr td a {
	margin-left: 10px;
}

#myTable tr.header {
	background-color: #5585cc;
	color: white;
}

#myTable tr:hover {
	background-color: #8FB7E7;
	color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<table id="myTable">
	<thead>
		<tr class="header">
			<th style="width: 25%;">Name on Card</th>
			<th style="width: 18%;">Card Type</th>
			<th style="width: 21%;">Card Number</th>
			<th style="width: 18%;">Expiration</th>
			<th style="width: 18%;">Status</th>
		</tr>
	</thead>
	<tbody>
		<tr class="rClickable">
			<td>Richard Weld</td>
			<td>VISA</td>
			<td>xxxx-xxxx-xxxx-0512</td>
			<td>03/22</td>
			<td>ACTIVE</td>
		</tr>
		<tr class="rClickable">
			<td>Timothy J McGinley</td>
			<td>VISA</td>
			<td>xxxx-xxxx-xxxx-2475</td>
			<td>12/17</td>
			<td>ACTIVE</td>
		</tr>
		<tr class="rClickable">
			<td>Avis Budget Group</td>
			<td>VISA</td>
			<td>xxxx-xxxx-xxxx-5324</td>
			<td>05/21</td>
			<td>INACTIVE</td>
		</tr>
		<tr class="rClickable">
			<td>Donna Fleetwood</td>
			<td>VISA</td>
			<td>xxxx-xxxx-xxxx-9985</td>
			<td>07/19</td>
			<td>ACTIVE</td>
		</tr>
	</tbody>
</table>

我想让行可点击。我尝试了很多事情，例如:

<tr onclick="javascript:window.location.assign('/epayui/app/payments/enterPayment');">

我尝试过jquery('rClickable'是每个ro的类):

    $(".rClickable").click(function(){
    window.location.assign = "/epayui/app/payments/enterProfilePayment";
    });

另一个版本

$("#rClickable").on("click","tr",function(){
        window.location.assign = "/epayui/app/payments/enterProfilePayment";
    });

这些对我来说都不起作用。我还有一个 $(document).ready(); 函数，但目前里面什么也没有。我计划将其用于某些用途，因此无法删除它。

我不想使用 Bootstrap 。仅限 JavaScript 或 jquery。

任何帮助将不胜感激。

Answer 1

您在代码片段中使用了非常旧版本的 jQuery - 在函数 on 存在之前。

您可以使用click来实现您的要求，如下所示。

$(function(){
   $('.rClickable').click(function(){
       console.log("You clicked", $('td:first',this).text());
   });
});

#myTable {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #ddd;
}

#myTable th {
	text-align: left;
	padding: 10px;
	font-size: 16px;
}

#myTable td {
	text-align: left;
	padding: 10px;
	font-size: 14px;
}

#myTable tr {
	border-bottom: 1px solid #ddd;
}

#myTable tr td a {
	margin-left: 10px;
}

#myTable tr.header {
	background-color: #5585cc;
	color: white;
}

#myTable tr:hover {
	background-color: #8FB7E7;
	color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<table id="myTable">
	<thead>
		<tr class="header">
			<th style="width: 25%;">Name on Card</th>
			<th style="width: 18%;">Card Type</th>
			<th style="width: 21%;">Card Number</th>
			<th style="width: 18%;">Expiration</th>
			<th style="width: 18%;">Status</th>
		</tr>
	</thead>
	<tbody>
		<tr class="rClickable">
			<td>Richard Weld</td>
			<td>VISA</td>
			<td>xxxx-xxxx-xxxx-0512</td>
			<td>03/22</td>
			<td>ACTIVE</td>
		</tr>
		<tr class="rClickable">
			<td>Timothy J McGinley</td>
			<td>VISA</td>
			<td>xxxx-xxxx-xxxx-2475</td>
			<td>12/17</td>
			<td>ACTIVE</td>
		</tr>
		<tr class="rClickable">
			<td>Avis Budget Group</td>
			<td>VISA</td>
			<td>xxxx-xxxx-xxxx-5324</td>
			<td>05/21</td>
			<td>INACTIVE</td>
		</tr>
		<tr class="rClickable">
			<td>Donna Fleetwood</td>
			<td>VISA</td>
			<td>xxxx-xxxx-xxxx-9985</td>
			<td>07/19</td>
			<td>ACTIVE</td>
		</tr>
	</tbody>
</table>