表格行单击，外部加载 [英] Table Row Click, External loading

问题描述

请查看：

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery /

我想做一切演示，只使用表格行点击而不是href链接。我如何做到这一点？

编辑

这是我尝试使用的代码：

 < script> 
 $（document）.ready（function（）{
 
 //检查URL 
中的哈希值var hash = window.location.hash.substr（1）; 
 var href = $（'＃MyTable_ID tr td'）。each（function（）{
 var href = $（this）.attr（'href'）; 
 if（hash == load（toLoad）
'（'＃DivContent_ID'）.href.substr（0，href.length-5））{
 var toLoad = hash +'。html #DivContent_ID'; 
 $ 
 $）
 $ b $（'＃MyTable_ID tr td'）。click（function（）{
 
 var toLoad = $（this）.attr（' （''''''''''）;'$'$'$'$'$'$'$'$'$'$'$'$'$' $（'＃wrapper'）。append（'< span id =load> LOADING ...< / span>'）; 
 $（'＃load'）。fadeIn（'normal' ）; 
 window.location.hash = $（this）.attr（'href'）。substr（0，$（this）.attr（'href'）。length-5）; 
 function loadContent（）{
 $（'＃DivContent_ID'）。load（toLoad，''，showNewContent（））
} 
 function showNewContent（）{
 $（'＃DivContent_ID'）。show（'normal' ，hideLoader（））; 
} 
函数hideLoader（）{
 $（'＃load'）。fadeOut（'normal'）; 
} 
返回false; 
 
}）; 
}）; 
< / script> 
  

解决方案

添加一个ID为id的表格， 'link'

像

 < table id ='links > 
< tr> 
< td rel ='index.html'>索引< / td> 
  

然后更改

点击（函数（）{//改变目标元素
 var toLoad = $（this）.attr（'href'）+'#content '; //是我们需要的URL的来源
  

到

  $（'＃links tr td'）。click（function（）{//更改为ID表中的td 
 var toLoad = $（this）.attr（'rel'）+'#content'; // rel属性现在拥有我们的URL ... 
  

Please view:

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

I want to do everything that the demo does, only using a table row click instead of an a href link. How do i do this?

EDIT

This is the code im trying to use:

<script>
$(document).ready(function() {  

    // Check for hash value in URL  
    var hash = window.location.hash.substr(1);  
    var href = $('#MyTable_ID tr td').each(function(){  
        var href = $(this).attr('href');  
        if(hash==href.substr(0,href.length-5)){  
            var toLoad = hash+'.html #DivContent_ID';  
            $('#DivContent_ID').load(toLoad)  
        }  
    });  

    $('#MyTable_ID tr td').click(function(){  

    var toLoad = $(this).attr('rel')+' #DivFromExternalPage';  
    $('#DivContent_ID').hide('fast',loadContent);  
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');  
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
    function loadContent() {  
        $('#DivContent_ID').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#DivContent_ID').show('normal',hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  

    });  
});  
</script>

解决方案

add a table with an id, such as id='links'

like

<table id='links'>
  <tr>
    <td rel='index.html'>index</td>

and then change

$('#nav li a').click(function(){ //change the targeted element
var toLoad = $(this).attr('href')+' #content'; //was the source of the URL we needed

to

$('#links tr td').click(function(){ //changed to the td inside a ID'd table
var toLoad = $(this).attr('rel')+' #content'; //the rel attribute now holds that URL for us...

这篇关于表格行单击，外部加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！