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>

无法使表行可单击

1 个答案: