Question

我希望通过嵌入包含类似链接的隐藏<td>来使表格行完全可点击：

<tr class="simplehighlight junk" >
  <td>07/09/2011</td>
  <td>Jennifer Woods Memorial GP</td>
  <td>A52</td>
  <td>Harris, Fred</td>
  <td>1900</td>
  <td>Nikolayev, Igor</td>
  <td>2395</td>
  <td class="text-center">0-1</td>
  <td style='display:none;visibility:hidden;\'> games/game1242.php </td>
</tr>

我正在使用colorbox来定位表格单元格：

<!--colorbox-->
<script src="./js/jquery.colorbox-min.js"></script>
<script>
  $('tr.junk').colorbox(
    {
      iframe:true,
      transition:'elastic',
      speed:'100',
      width:1030,
      height:550,
      href: function(){
        return $(this).find('td').eq(8).text();
      }
    }
  );
</script>

但我想使用jquery：

<!--Another Pop-up for games table-->
<script src="./js/jquery.popupWindow-min.js" ></script> 
<script>
  $('.diagram-popup').popupWindow({centerBrowser:1, height:560, width:1024});
</script>

如何将类diagram-popup添加到第8个表数据单元格并在单击时让行读取该单元格的内容？

Answer 1

<td class='diagram-popup' style='display:none;visibility:hidden;\'> games/game1242.php </td>

$(document).ready(function(){
   $('.diagram-popup').click(function(){
      $(this).html(); //contents of cell
   });
});

这就是你要找的东西吗？

更新：啊，我明白了...你想要点击行中的任何单元格然后去获取内容..也许这会有所帮助......

<td style='display:none;visibility:hidden;\'> games/game1242.php </td>

$(document).ready(function(){
   $('table tr td').click(function(){
      var cell = $(this).parent().find('td:last');
      cell.addClass('diagram-popup'); //Not clear on if this is what you're wanting, you can always just print out the diagram-popup class server side 
      cell.html(); //contents of cell
   });
});

我没有测试过，但它应该有用。

Answer 2

你想要在你的可点击行中添加一个类，我可能会更改有问题的tr来读取这样的内容：

<tr class="simplehighlight junk diagram-popup" data-href="games/game1242.php" >

我会彻底放弃你隐藏的<td>，这是不必要的。

和jquery：

<script src="./js/jquery.popupWindow-min.js" ></script> 
<script type='text/javascript'>
  $(function(){
    $('.diagram-popup').click(function(e){
      $(this).popupWindow({
        windowURL: $(this).data('href'),
        centerBrowser: 1,
        height: 560,
        width: 1024
      });
    });
  });
</script>

当我点击某些东西时，我并不喜欢让窗户弹出...我认为它不会带来良好的用户体验。但是每个人都有自己的。

这是一个jsfiddle作为概念证明：http://jsfiddle.net/UujmJ/1/

单击时读取然后加载弹出窗口

2 个答案: