td in a Function

Asked

Viewed 74 times

2

You have the possibility to add a td / div / table / iframe within a Function?

For example:

function Retorno(){
    <td height="#" width="#" >
        <div id="#" width="#">
            <table width="#">
                <tr>
                    <td >
                        <iframe style="#" src="#" width="#" height="#" >
                        </iframe>
                    </td>
                </tr>
          </table>
       </div>
    </td>   
}

To sum up, I wish it were like the :

function Retorno(){
    window.self.location.href ="#";
}

Only that determining size, shape, etc.

javascript

  • Did not understand well, doubt is how to create this DOM hierarchy within a function? To later add to the DOM of the page?

  • @Wakim, that’s right, is that in my case I want to perform this function by calling certain page! But I have no idea how to put javascript to type this (I don’t even know if it’s possible)!

  • So you want a way to change the values of the elements via javascript correct? I see two ways to do this, I will elaborate a response.

  • That’s right @Wakim, thank you ^^

  • @Felipe the most practical can be to have this code already in HTML with display: none; and make a clone when needed.

  • @Sergio could make it more specific ?

  • @Felipe if you put all this html on the page you can search with javascript and make a copy and then insert where necessary. It can be useful to use Mootools or jQuery.

Show 2 more comments

2 answers

4

One possibility is to save this HTML as a template within a tag <script>. The type="text/template" makes the content not be interpreted as JS:

<script id="template-celula" type="text/template">
    <td height="#" width="#" >
        <div id="#" width="#">
            <table width="#">
                <tr>
                    <td >
                        <iframe style="#" src="#" width="#" height="#" >
                        </iframe>
                    </td>
                </tr>
          </table>
       </div>
    </td>   
</script>

<table><tr></tr></table>

<script>
function celula() {
     var html = document.getElementById('template-celula').innerHTML;
     var div = document.createElement('div');
     div.innerHTML = html;
     return div.firstChild.nextSibling;
}
document.getElementsByTagName('tr')[0].appendChild(celula());
</script>

http://jsbin.com/zamefoba/1/edit

2

I recommend using the Buildr.

var iFrames = [{
    width: "560",
    height: "315",
    src: "//www.youtube.com/embed/rj6OLq9W6RE",
    frameborder: 0,
    allowfullscreen: true
}];

$div = $("div");

function Retorno() {
    $div.build(function (b) {
        b.table(function () {
            b.each(iFrames, function (idx, it) {
                b.tr(
                b.td(
                b.iframe({
                    width: it.width,
                    height: it.height,
                    src: it.src,
                    frameborder: it.frameborder,
                    allowfullscreen: it.allowfullscreen
                })));
            });
        });
    });
}

Example: http://jsfiddle.net/Ridermansb/Hym5Z/embedded/

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.