从表信息创建 url 的可点击行答案

【问题标题】：clickable rows that create url from the table info从表信息创建 url 的可点击行
【发布时间】：2012-08-16 22:55:55
【问题描述】：

我有一张表，其名称与其网址对应

我想使用表中的信息来创建如果我单击该行时页面将转到的 url。

我正在使用数据表 http://www.datatables.net ，如果有人能指出我的代码或 api 那就太好了。

【问题讨论】：

标签： javascript datatables

【解决方案1】：

完整代码：文章逐步描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Full Row Select Using jQuery</title>
  <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
  <style type="text/css">
    .Highlight
    {
      background-color: #dcfac9;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <table width="100%" border="1" cellpadding="0" cellspacing="0" id="link-table">
  <tr>
    <td><a href="http://www.yahoo.com/">http://www.yahoo.com/</a></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td><a href="http://www.microsoft.com/">http://www.microsoft.com/</a></td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td><a href="http://imar.spaanjaars.com/">http://imar.spaanjaars.com/</a></td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  </table>
  <script type="text/javascript">
    $(function ()
    {
      // Hide the first cell for JavaScript enabled browsers.
      $('#link-table td:first-child').hide();

      // Apply a class on mouse over and remove it on mouse out.
      $('#link-table tr').hover(function ()
      {
        $(this).toggleClass('Highlight');
      });

      // Assign a click handler that grabs the URL 
      // from the first cell and redirects the user.
      $('#link-table tr').click(function ()
      {
        location.href = $(this).find('td a').attr('href');
      });
    });
  </script>
</body>
</html>

以下是示例：

http://imar.spaanjaars.com/549/how-do-i-make-a-full-table-row-clickable-using-jquery http://imar.spaanjaars.com/312/how-do-i-make-a-full-table-row-clickable

【讨论】：