Is there any possibility to Highlight a table row without external JS Library but using just JavaScript?
<table>
<tr>
<th>Nom</th>
<th>n°</th>
</tr>
<tr class="item">
<td class="listeitem">Denis PAPIN</td>
<td class="listeitem">7</td>
</tr>
<tr class="item">
<td class="listeitem">Albert EINSTEIN</td>
<td class="listeitem">2</td>
</tr>
<tr class="item">
<td class="listeitem">Nikola TESLA</td>
<td class="listeitem">18</td>
</tr>
(…)
</table>
Add a class to the row you want to highlight? We need some context here. But yes it's entirely possible
Related
I am trying to show some words in bold inside a table. That is, I am putting a sentence inside td tag, and I want to bold some words of that sentence.it is working when I put a string in Html and give to that word. but when I give a variable it is not working.
<table class="action_tables" border="1">
<tr>
<td class="header_column">Name1:</td>
<td class="content_column">this is <b>bold</b></td>
</tr>
<tr>
<td class="header_column">Name2:</td>
<td class="content_column">{{element[0].matched_keyword}}</td>
</tr>
<tr>
<td class="header_column">Subject1:</td>
<td class="content_column">{{element[0].nlp_matched_sentence}}</td>
</tr>
<tr>
<td class="header_column">bold value1:</td>
<td class="content_column">{{x}}</td>
</tr>
<tr>
<td class="header_column">bold value2:</td>
<td class="content_column"><span style="font-weight:bold">Your bold text</span></td>
</tr>
</table>
.ts file
element = [
{
id: 5636,
matched_keyword: "test",
nlp_matched_sentence:
"The <strong>Air Force</strong> Test Center"
}
];
after my research I got 3 solutions but none of them are working for me. please check the demo for more information.
stackbliz demo
Take a look at demo code
You need to add [innerHTML] as below:
<td class="content_column" [innerHTML]="element[0].nlp_matched_sentence"></td>
To set html content programatically, we need to use innerHTML.
To use innerHTML as a data binding, we need to use interpolation syntax => innerHTML = {{}}
To use innerHTML as property binding, we need to use square brackets syntax => [innerHTML]=""
Change your html code like below,
<table class="action_tables" border="1">
<tr>
<td class="header_column">Name:</td>
<td class="content_column">this is <b>bold</b></td>
</tr>
<tr>
<td class="header_column">Name:</td>
<td class="content_column">{{ element[0].matched_keyword }}</td>
</tr>
<tr>
<td class="header_column">Subject:</td>
<td class="content_column">
<div innerHTML="{{ element[0].nlp_matched_sentence }}"></div>
</td>
</tr>
<tr>
<td class="header_column">bold value:</td>
<td class="content_column"><div innerHTML="{{ x }}"></div></td>
</tr>
</table>
I am trying to set width:13% of Date column. But it doesn't work in my way. Where is the problem? and can't reduce width of subject column. Thanks in advance.
Check FIDDLE
<div style="width:70%;float:left;">
<div>
<table style="width:100%;" class="TicketsDashboard">
<tbody>
<tr>
<td style="width:13%"><b>Date</b></td>
<td ><b>Type</b></td>
<td ><b>Subject</b></td>
<td ><b>Responsible</b></td>
<td ><b>Action</b></td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',124)">
<td>2019-07-21 12:52:08</td>
<td>Recommendation</td>
<td>First Subject going on perfectly edited</td>
<td>perfect</td>
<td class="editButtonMain">Edit</td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',125)">
<td>2019-07-21 12:53:26</td>
<td>Decision</td>
<td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
<td>bangldesh</td>
<td class="editButtonMain">Edit</td>
</tr>
</tbody>
</table>
</div>
<br>
<div id="ticketButtons"><input type="button" class="Btn" onclick="openDiag({function: "item", id: 155, dialogTitle: this.value})" value="Add Protocol Item"></div>
</div>
<div style="width:30%;float:left">
<table style="width:100%;" class="lightborder" id="headTable">
<tbody>
<tr id="slaTr">
<td width="100" valign="top">SLA:</td>
<td>
<div id="effortDiv" style="width:50%;float:left;text-align:center;padding-bottom:10px;display:none"></div>
<div id="timeDiv" style="text-align:center;padding-bottom:10px;display:none"></div>
</td>
</tr>
<tr>
<td width="100">Status:</td>
<td id="statusTd">Suggestion</td>
</tr>
<tr>
<td>Protocol Number:</td>
<td id="breadCrumb">PROT-155</td>
</tr>
<tr>
<td>Subject:</td>
<td id="protsubject">Chonchol -- test</td>
</tr>
<tr>
<td>Start Date:</td>
<td id="protstartdate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>End Date:</td>
<td id="protenddate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>Keeper:</td>
<td id="protkeeper">ewrwer</td>
</tr>
</tbody>
</table>
</div>
your subject column is going out because u didn't used space in this code <td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td> if you want to be stop exceeding you can give space like this <td>lklk kdj djjdjdjdjdjd jdjdjdjdjdjdjdj djjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
What actually you wanted to get let us know clearly.
To increase the width of td
instead of <td style="width:13%"> give <td style="padding-left:13%">
To avoid the overflow
add
<style>
table { table-layout:fixed; }
table td {word-wrap:break-word;}
</style>
Thanks,
the reason of it, you should set the same style for the given column in every rows, or add a thead section in which you set it once of the column.
I'm working with the following HTML:
<tr class="oddrow">
<td>row1</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
</tr>
<tr class="evenrow">
<td>row2</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
<!-- The above line is the one I need. --!>
</tr>
There are 2 such rows (row1 and row2), alternating as an oddrow then evenrow. I have the entire HTML as a string in my JavaScript/jQuery code. I also have the information of the two three-letter abbreviations: in this example, WSH and SAC. What I need is the third <td style="text-align:center;"> of the row2 row. I should point out that there are several tables of row1 and row2 on the page, so I need a general selector. What I have been doing is just grabbing all the data in all the rows then parsing it from there, but the inconsistency of the data is making that more difficult. Is there a quick and dirty jQuery that will point me to the data I need?
I was thinking something like $("tr td:contains(" + abbrev + ") td:contains('row2')").text();, but that doesn't get it.
Can anyone help?
Your hierarchy in your selector is wrong, tds with the abbreviation are not an ancestor to the tds with the text of "row2"
You also need to ensure you have apostrophes around your abbrev variable.
Can you try:
$("tr td:contains('row2') td:contains('" + abbrev + "')").text()
Any chance you can add semantic classes instead? These sorts of selectors are gnarly to maintain.
I have the following table dynamically generated. Number of columns is dynamic and is between 4-12 based on user selection.
<table>
<tr>
<th class="roleComparethead">Function</th>
<th class="roleComparethead"">Type</th>
<th class="roleComparethead">1111</th>
<th class="roleComparethead">222</th>
<th class="roleComparethead">555</th>
</tr>
<tr class="cRow">
<td class="roleComparethead"> Profiles Maintenance</td>
<td class="type"> Internal </td>
<td class="access"><span class="accessLevel">Update</span></td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">NoAccess</span> </td>
</tr>
<tr class="cRow">
<td class="roleComparethead"> Profiles Maintenance</td>
<td class="type""> Internal </td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">Read</span> </td>
</tr>
I want to hide rows in the table if values of all cells with class="accessLevel" in that row are same and display only if the values are different. How do i achieve this using jQuery or Javascript?
Thank you.
You can try this solution
http://jsfiddle.net/mjaric/aLWVM/
It can be done in less lines, but I in purpose split it to more. Check it out and let me know if behaviour is correct.
My page has this design.
<tr id="master">
<td id="row1"> <textbot> </td>
<td id="row2"> <linkbutton> </td>
</tr>
I am cloning the same TR onclick of the link button and the current link button will be hidden. so a new row will be created.
consider I have cloned thrice
<tr id="master">
<td id="row1"> <textbot> </td>
<td id="row2"> <linkbutton> </td>
</tr>
<tr id="master">
<td id="row1"> <textbot> </td>
<td id="row2"> <linkbutton> </td>
</tr>
<tr id="master">
<td id="row1"> <textbot> </td>
<td id="row2"> <linkbutton> </td>
</tr>
Now I want to show the second row's link button.
I am trying with
$(this).parents('#master :last').prev().children('#row2).show();
But its not working.
You can't/shouldn't clone elements that have IDs, because IDs are supposed to be unique in a document. Although a browser will happily let you have the same ID twice, Javascript and jQuery do not forgive you for this and things will not work as expected. The proper way to group elements is by classes.
So if you switch your code to this:
<tr class="master">
<td class="row1"> <textbot> </td>
<td class="row2"> <linkbutton> </td>
</tr>
Your selector might look like this:
$('tr.master').eq(1).find('td.row2').show();
you know, ID must be unique .. so i recommend to change all id to class.
i think the syntax for parrent should :
$('#master:parent');