html – jQuery with Nested Tables, select outer table tr/td with passed Selector

I am trying to setup a nested table function. So within the function I am passing a selected element and I want to select only the children/direct-descendants td/tr of that table and NOT the nested table\’s td/tr elements. Here is a little example that I setup.

<table class=\"top\">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>
            <table class=\"nested\">
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<div id=\"results\"></div>

and the jQuery / Javascript to go with it…

var tbl = $(\".top\");
var r = $(\"div#results\");

$(r).html(\"\");

$(r).append(\"var tbl = $(\\\".top\\\")</br>\")

$(r).append(\"$(tbl).find(\\\"td\\\").length:\" + $(tbl).find(\"td\").length.toString() + \"</br>\");

$(r).append(\"$(\\\"td\\\", tbl).length: \" + $(\"td\", tbl).length.toString() + \"</br>\");

$(r).append(\"$(tbl).children(\\\"tbody\\\").children(\\\"tr\\\").children(\\\"td\\\").length: \" + $(tbl).children(\"tbody\").children(\"tr\").children(\"td\").length.toString() + \"</br>\");

The results are as follows…

var tbl = $(\”.top\”) (to simulate the passed selector)

$(tbl).find(\”td\”).length:12 (selects ALL td elements)

$(\”td\”, tbl).length: 12 (selects ALL td elements, same as above)

$(tbl).children(\”tbody\”).children(\”tr\”).children(\”td\”).length: 6 (selects the proper elements, but the jQuery chain seems too long and strict for what I want to do)

Any help to find the proper selector for the children elements of the top level table is much appreciated! Thanks!

Rating: 2 out of 5 based on 3 ratings

Posts Related to html - jQuery with Nested Tables, select outer table tr/td with passed Selector

• Jul 14th, 2012 javascript - what is error in this js code Saturday AM 04:52:06


• Jul 25th, 2012 Javascript Object not defined after being created in a function Wednesday PM 13:05:52


• Jul 14th, 2012 Is there a way to add raw html as new table rows with javascript? Saturday AM 06:21:32


• Jul 07th, 2012 css - positioning an element absolutely *within* another element Saturday PM 22:55:41


• Jul 19th, 2012 php - Opening jQuery UI Dialog box with dynamic content Thursday AM 09:15:54


• Jul 14th, 2012 jquery - Initialize dataTable from separate .php table Saturday AM 02:20:55


• Jul 22nd, 2012 use variable from php as an alert for javascript Sunday AM 11:07:10


• Jul 23rd, 2012 How to get contents of a cell of html table using javascript? Monday AM 07:30:52


• Jul 24th, 2012 How to change the contents of an HTML table with php + javascript Tuesday PM 13:44:42


• Jul 19th, 2012 javascript - How to automatically sum input value boxes in an HTML table that share the same name? Thursday PM 14:46:03

The post html – jQuery with Nested Tables, select outer table tr/td with passed Selector appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/html-jquery-with-nested-tables-select-outer-table-trtd-with-passed-selector.html