Question

我有一个名称与其网址相对应的表格

如果我点击该行，我想使用表格中的信息来创建页面将转到的网址。

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

Answer 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>

以下是exmaples：

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

可从表信息创建URL的可单击行

1 个答案: