-2

URLに対応する名前のテーブルがあります

表の情報を使用して、その行をクリックした場合にページが移動するURLを作成したいと思います。

私はdatatableshttp://www.datatables.netを使用しています。誰かが私にこのためのコードまたはAPIを教えてくれるなら、それは素晴らしいことです。

4

1 に答える 1

0

完全なコード：記事はそれを段階的に説明します

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

于 2012-08-16T23:03:32.103 に答える