get classname of a last <tr> element in a div - javascript

I have a table like below. As you can see first <tr> element's class is "success" and second "active" and third is "success"...etc..
Now I want to do this dynamically. But I can't get last <tr> element's classname for add some condition.
How can I do this in JavaScript?
<div id="masterContainer" class="bs-example">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">User Information</div>
<div class="panel-body">
<p>The following table contains some personal information about users.</p>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr class="success">
<td><b>First Name</b> <br> som</td>
</tr>
</thead>
<tbody>
<tr class="active">
td><b>First Name</b> <br> something</td>
</tr>
<tr class="success">
td><b>First Name</b> <br> something</td>
</tr>
<tr class="active">
td><b>First Name</b> <br> something</td>
</tr>
</tbody>
</table>
</div>
</div>

You can use :last selector:
$('.table tr:last').attr('class');

The querySelectorAll method lets you pass CSS selectors to find nodes you're interested in
var nodes = document.querySelectorAll('div tr'); // all <tr> descendants of <div>s
nodes[nodes.length - 1].className; // "active" // the last of these

Related

Div gets cloned multiple times instead of the required amount

I have some JSON data that contains four sections, and I want my html div to be cloned depending on how many sections there are. So if I have 100 sections in my JSON, the div should be cloned 100 times.
My div is getting cloned and the JSON data is getting appended to each one, but the problem is that the divs are getting cloned more than once. The first JSON section gets cloned 4x, the second one 3x, the third one 2x, etc. There's a pattern here but I'm not sure why it's happening.
JSON
JS snippet:
import $ from 'jquery';
import jsonData from "./test.json";
let onlyTitles = jsonData.d.results.filter(result => result.Title !== "");
onlyTitles.forEach(title => {
let $clonedDiv = $("#template").clone();
$clonedDiv.removeAttr("id");
$clonedDiv.find("#filledRowBody").append(`<td>${title.Title}</td><td>${title.Role}</td><td>${title.Office}</td><td>${title.IsActive}</td>`);
$clonedDiv.find("#filledRowBody").removeAttr("id");
$("#titleBody").append($clonedDiv);
})
HTML snippet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="template" class="col-6">
<h3 id="display-form-job-title"></h3>
<div class="button-group">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit Form</button>
<!-- Button trigger PDF -->
<button type="button" class="btn btn-secondary" id="pdf-trigger" data-toggle="" data-target="#pdfprint">Save as PDF</button>
</div>
<hr>
<h4>Hiring Goals:</h4>
<div class="col-12">
<table class="table order-list" id="hiring-goals-table">
<thead>
<tr>
<td>Number of Hires</td>
</tr>
</thead>
<tbody class="tbody-hire">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<h4>Open Searches:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td>Role</td>
<td>Location</td>
<td>Active</td>
</tr>
</thead>
<tbody class="tbody-search">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<h4>Roles Filled:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td class="thead-emp">Name</td>
<td class="thead-role-fill">Role</td>
<td class="thead-loc-fill">Location</td>
<td class="thead-act-fill">Active</td>
</tr>
</thead>
<tbody>
<tr id="filledRowBody">
</tr>
</tbody>
</table>
</div>
</div>
<div id="titleBody">
</div> <!-- col-6 -->
It turned out that #titleBody was inside of the col-6 div which somehow led to the duplications.

How to highlight Bootstrap parent table row by finding keyword in collapsed row?

I would like to highlight normal title table row in Bootstrap if normal table row or "child" collapsed table row contains at least 1 keyword from array.
Let's say that I have an array of keywords. 2., 4., 6. table row are collapsed in Bootstrap, they are children of their parent (not in sense of DOM). 1. <tr> contains keyword1 in title. 4. collapsed table row contains also keyword2.
So far I managed to make this partially chubby-workable solution. Problem is that when collapsed table row contains keyword it does not highlight "parent" row.
Working example: http://www.bootply.com/WYvFXheQlN
JS
<script type='text/javascript'>
$(document).ready(function() {
$("tr:contains(keyword1)" ).addClass("yellow");
$("tr:contains(keyword2)" ).addClass("yellow");
});
</script>
CSS
.yellow {
background-color: yellow;
}
HTML
<div class="container">
<div class="row">
<table class="table table-hover table-responsive">
<tbody>
<tr>
<td>
<a>Title1 keyword1 ...</a>
</td>
<td class="text-right">
<a data-toggle="collapse" href="#collapse1">Open</a>
</td>
</tr>
<tr class="collapse" id="collapse1">
<td colspan="2">
...lorem ipsum ...
</td>
</tr>
<tr>
<td>
<a>Title2 ...</a>
</td>
<td class="text-right">
<a data-toggle="collapse" href="#collapse2">Open</a>
</td>
</tr>
<tr class="collapse" id="collapse2">
<td colspan="2">
.... keyword2 lorem ipsum ...
</td>
</tr>
<tr>
<td>
<a>Title3</a>
</td>
<td class="text-right">
<a data-toggle="collapse" href="#collapse3">Open</a>
</td>
</tr>
<tr class="collapse" id="collapse3">
<td colspan="2">
... lorem ipsum ...
</td>
</tr>
</tbody>
</table>
</div>
</div>
So naturally I tried different variations playing with DOM and jQuery. Puting child row into parent row seems as good idea. I tried to use jQuery's functions parent(),parents() or closest() but still, neither solution was taking correct table row and highlighted it.
Following code also works but never highlight parent <tr>:
<tr>
<td>
<a>Title2 ...</a>
</td>
<td class="text-right">
<a data-toggle="collapse" href="#collapse2">Open</a>
</td>
<tr class="collapse" id="collapse2">
<td colspan="2">
...lorem ipsum keyword2...
</td>
</tr>
</tr>
Can anybody help me? How to highlight parent table row when keyword is in child table row content?
p.s.bonus: This was the first code I settled. Keywords are in string, code highlight only keyword itself.
<script type='text/javascript'>
$(document).ready(function() {
var regex = /('keyword1|keyword2|...')/g;
$(\'tbody\').each(function() {
var $this = $(this);
var text = $this.text();
if (regex.test(text)) {
$this.html( $this.html().replace(regex, \'<span class="yellow">$1</span>\') );
}
});
});
</script>

My HTML is rearranging itself how is this happening?

As the title says, my markup is rearranging itself. I have absolutely no idea how that works.
The accordion moves itself outside of the table, if you right click and inspect the table the markup shows it's actually moved.
I understand that this would make for some weird looking results, but it's a start to figuring out how to have accordion tables. I'm aiming to have a table row clickable and the accordion rolls out under it.
JSFiddle: https://jsfiddle.net/f6dn4pec/2/
$('.ui.accordion')
.accordion();
<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div>
<table class="ui single line table">
<thead>
<tr>
<th>Name</th>
<th>Registration Date</th>
<th>E-mail address</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22#yahoo.com</td>
<td>No</td>
</tr>
<tr id="test">
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton#yahoo.com</td>
<td>Stuff</td>
</tr>
<tr>
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> What is a dog?
</div>
<div class="content">
<p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
</div>
</tr>
<tr>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22#yahoo.com</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
<div> is not a valid child of <tr>.
When browsers run into invalid markup they kick it out of current part of the dom tree...with unpredictable results.
Final answer...use valid html
Reference MDN - <tr> Usage Context
The accordion div needs to be in a <td> tag. The <td> tag is the actual table cell.

Insert rows at specific index of another row in ng-repeat

Here's the code:
<tr ng-repeat="param in tags[$index].parameters">
<td class="previewParamName">{{param.name}}</td>
<td>
<div ng-if="is_array(param)">
<div class="previewParamValue limitWidth">List <span class="arrayParamArrow" ng-click="showArrayParams(param)" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span></div>
</div>
<div ng-if="!is_array(param)">
<div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
</div>
</td>
</tr>
<tr ng-hide="!arrayCollapsed" ng-repeat="params in arrayParameter">
<td>{{params.name}}</td>
<td class="wordBreak">{{params.value}}</td>
</tr>
What i want is to be able to put second row ng-repeat below specific row in the first ng-repeat, specifically when ng-if=is_array(param) div is shown, because it indicates that there needs to be more sub rows for that one specific row. Thanks
I'm not sure what is the exact structure for your array and how you get params for rows on click. But to render it you should try to use ngRepeatStart and ngRepeatEnd directives.
Something like this (simplified a little for the demo):
<tr ng-repeat-start="param in tags.parameters" ng-init="param.arrayCollapsed = false">
<td class="previewParamName">{{param.name}}</td>
<td>
<div ng-if="is_array(param)">
<div class="previewParamValue limitWidth" ng-click="param.arrayCollapsed = !param.arrayCollapsed">
List <span class="arrayParamArrow" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span>
</div>
</div>
<div ng-if="!is_array(param)">
<div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
</div>
</td>
</tr>
<tr ng-repeat="p in param" ng-show="param.arrayCollapsed" class="params-row">
<td>{{p.name}}</td>
<td class="wordBreak">{{p.value}}</td>
</tr>
<tr ng-repeat-end></tr>
From here you should be able to adjust it for your code.
Demo: http://plnkr.co/edit/tW3rUYXqoM9fTNHdOf9K?p=info
UPD: Better solution
Original code contains problem is that ngRepeatEnd tr is repeated for each iteration creating bunch of unnecessary empty tr. Not good.
Below is more more straightforward solution which uses two repeaters: one on tbody and the second on inner tr. Multiple tbodies is perfectly valid and it's even feels good that parameter rows are grouped together with their parent row into the same tbody.
<table class="table table-bordered table-condensed">
<tbody ng-repeat="param in tags.parameters" ng-init="param.arrayCollapsed = false">
<tr>
<td class="previewParamName">{{param.name}}</td>
<td>
<div ng-if="is_array(param)">
<div class="previewParamValue limitWidth" ng-click="param.arrayCollapsed = !param.arrayCollapsed">
List <span class="arrayParamArrow" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span>
</div>
</div>
<div ng-if="!is_array(param)">
<div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
</div>
</td>
</tr>
<tr ng-if="is_array(param)" ng-repeat="p in param" ng-show="param.arrayCollapsed" class="params-row">
<td>{{p.name}}</td>
<td class="wordBreak">{{p.value}}</td>
</tr>
</tbody>
</table>
Demo: http://plnkr.co/edit/0V1hDOpl2wukKFeIZC1O?p=info

Get nearest input element from same div

Let's say I have next construction
<table id="mainTable">
<tr>
<td>
<div class="parentDiv">
<input class="childInput"/>
<table>
<tbody>
<tr>
<td>
<span>I am here!</span>
<td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
How can I get input element from span? Using jQuery or standart methods.
mainTable has many rows so I can't use id on input.
I can do it with:
$($(spanElement).parents(".parentDiv")[0]).children(".childInput")[0]
Do you know an easier way?
$(spanElement).closest('.parentDiv').find('input');
$(spanElement).closest('.parentDiv').find('.childInput');

Categories