CODEWITHSUNDEEP
javascriptjquery
Ninja Cowgirl
Ninja Cowgirl

Reputation: 11221

Get row count from div

How to get row count from a div? I should get 2 from the count. I tried this on jsfiddle but I was unable to get the count. All I am trying to do is to get the total count and put the count in rowCount div

        <div id="__gvctl00_ctl33_g_1fce23cc_cb78_4993_8f8a_c3369f472afa_ReportGrid__div">
        <table class="ms-WPBody" cellspacing="0" id="ctl00_ctl33_g_1fce23cc_cb78_4993_8f8a_c3369f472afa_ReportGrid" style="border-style:None;width:100%;border-collapse:collapse;width:100%;">
            <tbody><tr class="ms-viewheadertr ms-vhltr">
                <th class="ms-vh2" align="left" scope="col">Item</th><th class="ms-vh2" align="left" scope="col">&nbsp;</th><th class="ms-vh2" align="left" scope="col"><a onclick="javascript:__gvctl00_ctl33_g_1fce23cc_cb78_4993_8f8a_c3369f472afa_ReportGrid.callback(&quot;0|0|/wEFDFdvcmtmbG93TmFtZQmCSxMfY/MQRgGNQMjtH6ms4WKDojWXqKHYKkdrUi0C|&quot;); return false;" href="javascript:__doPostBack('ctl00$ctl33$g_1fce23cc_cb78_4993_8f8a_c3369f472afa$ReportGrid','Sort$WorkflowName')">Workflow</a></th><th class="ms-vh2" align="left" scope="col">Status</th><th class="ms-vh2" align="left" scope="col"><a onclick="javascript:__gvctl00_ctl33_g_1fce23cc_cb78_4993_8f8a_c3369f472afa_ReportGrid.callback(&quot;0|0|/wEFCUVudHJ5VGltZWJK5FwcSWabKTvGRw+GSCnlui6XteK5oxR2+e2cXtJw|&quot;); return false;" href="javascript:__doPostBack('ctl00$ctl33$g_1fce23cc_cb78_4993_8f8a_c3369f472afa$ReportGrid','Sort$EntryTime')">Waiting since</a></th><th class="ms-vh2" align="left" scope="col"><a onclick="javascript:__gvctl00_ctl33_g_1fce23cc_cb78_4993_8f8a_c3369f472afa_ReportGrid.callback(&quot;0|0|/wEFFEN1cnJlbnRBY3Rpdml0eVRpdGxlkVg5pZyBZyiI8xdXZ5QTh61pFRK8yr4Y6G7G3fj/9GE=|&quot;); return false;" href="javascript:__doPostBack('ctl00$ctl33$g_1fce23cc_cb78_4993_8f8a_c3369f472afa$ReportGrid','Sort$CurrentActivityTitle')">Current action</a></th>
            </tr><tr>
                <td class="ms-vb2"><a href="http://canada-dev.canada.com/teams/wf/_layouts/15/NintexWorkflow/Redirect.aspx?view=WorkflowTask&amp;InstanceId=c051a9ce-8c56-40ed-af65-a69f6cf1af18&amp;SPTaskID=9">a test</a></td><td class="ms-vb2"></td><td class="ms-vb2">TEST-legalTasks</td><td class="ms-vb2"></td><td class="ms-vb2">4/6/2015 9:18 AM</td><td class="ms-vb2"><a href="http://canada-dev.canada.com/teams/wf/_layouts/15/NintexWorkflow/Preview.aspx?ListId=9417bb8a-7811-4b04-80d6-507c788969f5&amp;ItemId=1&amp;WorkflowId=5bdd0cef-5ade-4a27-ad9b-f0cfc17e3bf7&amp;InstanceId=c051a9ce-8c56-40ed-af65-a69f6cf1af18">Request approval</a></td>
            </tr><tr class="ms-alternating">
                <td class="ms-vb2"><a href="http://canada-dev.canada.com/_layouts/15/NintexWorkflow/Redirect.aspx?view=WorkflowTask&amp;InstanceId=9440ac78-287f-43d2-bb58-aebbe9c64983&amp;SPTaskID=3">How to handle in Nintex workflwo</a></td><td class="ms-vb2"></td><td class="ms-vb2">Nintex Task Workflow</td><td class="ms-vb2"></td><td class="ms-vb2">4/6/2015 2:05 PM</td><td class="ms-vb2"><a href="http://canada-dev.canada.com/_layouts/15/NintexWorkflow/Preview.aspx?ListId=331be81b-ce04-4930-819e-2ed17daf5acd&amp;ItemId=2&amp;WorkflowId=bff491a8-e0ef-4a12-aec1-8ebb4cd868db&amp;InstanceId=9440ac78-287f-43d2-bb58-aebbe9c64983">Request approval</a></td>
            </tr>
        </tbody></table>
    </div>

Upvotes: 4

Views: 3146

Answers (4)

Thomas Stringer
Thomas Stringer

Reputation: 5862

You can get the count of tr elements in the table like this:

$(".ms-WPBody tr").not(":has(th)").length

That will find all tr elements without a child th.

Full code:

var rowCount = $(".ms-WPBody tr").not(":has(th)").length;
$(".rowCount").text("Num of rows: " + rowCount);

This shows:

Num of rows: 2

And doesn't have to use any magic numbers like "-1" that could introduce a rough bug if the table changes structure.

Here's the updated jsfiddle: https://jsfiddle.net/quyk2dqg/7/

Upvotes: 1

Tom Netzband
Tom Netzband

Reputation: 1110

There's a few things wrong in the fiddle, they are:

  • jQuery is not attached but you're trying to use it (you can attach libraries in the upper left corner dropdown at jsfiddle)
  • You're using ID selectors where you should be using class selectors ('#' is for ID, '.' is for class)
  • You're inserting the string 'row' into the html instead of the variable row.

Here's what I believe you wanted:

var parentX = $('.ms-vb2').position().left;
var rows = 0;

$('.ms-vb2').each(function(){
  if( $(this).position().left === parentX ) ++rows;
});

$('.rowCount').html('Num of rows: ' + rows);

Updated fiddle: https://jsfiddle.net/quyk2dqg/6/

Keep in mind that these are pretty loose selectors, if you're able to you might want to add specific classes to the rows so you can count them without doing a $.each

Something like $('.definitely-a-row-class').length.

Upvotes: 0

Martin Verner
Martin Verner

Reputation: 742

Remember -1 to compensate for header

var rows = 0;
rows = $('table').find("tr").length - 1;
$('#rowCount').html('row');
alert('Num of rows: ' + rows );

Upvotes: 0

Allen Tellez
Allen Tellez

Reputation: 1211

Try this, your fiddle had some errors and was not loading jquery. It still needs to have jquery ui position added I believe.

alert('Num of rows: ' + $('table tr').length );

http://jsfiddle.net/quyk2dqg/2/

Upvotes: 0

Related Questions