Question

I have a table inside an iframe. I want to jump to a specific row in that table by clicking an element outside the iframe. I’ve tried to use hash to go to an anchor with specified name. It seems to work with only <a> element but not <tr> as I want. Please take a look the following code:

<script type="text/javascript">
$(document).ready(function(){
    $("#jump").click(function(){
        top.myiframe.location.hash = "3";
        //top.myiframe.location.hash = "5"; //this works for <a>
    });
});
</script>

<p id="jump">Jump</p>    
<iframe id="myiframe" src="[my iframe url]" scrolling="no"></iframe>

myiframe.html includes:

<table>
    <tr name="1"><td>1</td></tr>
    <tr name="2"><td>2</td></tr>
    <tr name="3"><td>3</td></tr>
    <tr name="4"><td>4</td></tr>
</table>
<a name="5">5</a>

As you can imagine, I can jump to <a name="5">5</a> but not any <tr> element. Is there any suggestion?

Answer 1

You cannot use hash to a tr element. It works only with anchor tags. Moreoever to select any element from an iframe you have to use the below selector.

E.g to select the tr element inside iframe(myiframe)

$("#myiframe").contents().find("tr[name=3]");

//Code to scroll to the required element in iframe

$(document).ready(function(){
    $("#jump").click(function(){
        var iframe = $("#myiframe");
        var tr = iframe.contents().find("tr[name=3]");
        $(iframe.contentWindow || iframe.contentDocument).scrollTop(tr.offset().top);
    });
});