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.
Related
I have the following React JSX code for a table:
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
And I want to add a footer with 2 columns filling up the entire width but I'm having trouble doing that. I tried colspan but its not working as expected. How can I do this?
You can do this with colspan, all you need to take into account is that colspan should be integers (1,2,3) and cannot have something like 1.5.
So the trick is to also use colspan in your first row and give them all a colspan of 2, such that the total is 6 which you can divide by two columns of 3.
<table border="1">
<tr>
<td colspan="2">col1</td>
<td colspan="2">col2</td>
<td colspan="2">col3</td>
</tr>
<tr>
<td colspan="3">footer1</td>
<td colspan="3" >footer2</td>
</tr>
</table>
Just colspan your footer cell on all the 3 cells. Then add a separate table within that footer table and make 2 columns. Don't forget to make that inner table as lean as possible (no border, no margin, .. as you need it)
<table border="1">
<tr>
<td>col1</td>
<td width="400">col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table width="100%">
<tr>
<td width="50%">footer left</td>
<td width="50%">footer right</td>
</tr>
</table>
</td>
</tr>
</table>
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 have a table html code that comes from out source via ajax like this:
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
I want to get value of country value in this html. Jquery nth-child can find but I could not find. I find nht tr item but can not find value ("abc") of country.
Not sure what you want to do with it, but if you want to get the second td of a tr that contains Country, use the following $("table tr:contains(Country) td:eq(1)").text()
Demo
var text = $("table tr:contains(Country) td:eq(1)").text();
console.log(text)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
let country = document.querySelectorAll("tr")[1].querySelectorAll("td")[1].innerText;
document.querySelectorAll("tr")[1] (second tr)
.querySelectorAll("td")[1] (second td in second tr)
.innerText (gets value)
How about following selector:
$( "table.stripped tr:nth-child(2) td:nth-child(2)" ).val();
The only real reference point besides nth-child is your text headings.
Since this is the case we can just look through your table cells for the heading Date and then get the text from the following cell (that cell's index + 1).
It should be pointed out that this is less than ideal. This solution, like every other one we can offer given the circumstances, can very easily be defeated if mark-up changes in the future. Just something to keep in mind, though I do understand that sometimes you have no choice.
$("td").each(function(ind, ele) {
if(ele.textContent === "Date"){
console.log("date is", $("td").eq(ind+1).text() );
}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
Code: http://tpcg.io/Vy9IwJ
<script>
$(document).ready(function() {
$(".stripped td").get().forEach(function(entry, index, array) {
if ($(entry).text()=='Country') {
$('#result').html( $('#result').html()+'Country: '+$(entry).next().text() );
}
});
});
</script>
<div id="result">
</div>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
$(".rowIWanTtoReplace").replaceWith("<tr><td rowspan='11' class='n'>n</td><td rowspan='8'>n</td><td>t</td><td>n</td></tr><tr><td>u</td><td>n</td></tr><tr><td>v</td><td>n</td></tr><tr><td>w</td><td>n</td></tr><tr><td>x</td><td>n</td></tr><tr><td>y</td><td>n</td></tr><tr><td>z</td><td>n</td></tr>");
td {
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="station-device-table4">
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr class="rowIWanTtoReplace">
<td rowspan="11" class="s">foobar</td>
<td rowspan="7">foobar</td>
<td>n</td>
</tr>
</table>
I just wanted to check whether or not this should be the result of a replaceWith() in this situation:
If I have a table and on one row I apply replaceWith(), And What I replace it with is multiple table rows.
Shouldn't that just affect the HTML so when displayed multiple should show in that section?
i.e ------ TR 1 -----------
.replaceWith("<tr>x</tr><tr>y</tr>")
shouldn't the first row replace the other row. And the second row append after?
Or is there an alternative method?
Thanks.
Example code for situation:
<table class="station-device-table4">
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr class="rowIWanTtoReplace">
<td rowspan="11" class="s">foobar</td>
<td rowspan="7">foobar</td>
<td>n</td>
</tr>
</table>
JQuery example:
$(".rowIWanTtoReplace").replaceWith("<tr>
<td rowspan="11" class="n">n</td>
<td rowspan="8">n</td>
<td>t</td>
<td>n</td>
</tr>
<tr><td>u</td><td>n</td></tr>
<tr><td>v</td><td>n</td></tr>
<tr><td>w</td><td>n</td></tr>
<tr><td>x</td><td>n</td></tr>
<tr><td>y</td><td>n</td></tr>
<tr><td>z</td><td>n</td></tr>")
Note: This is made from backbone collections and stuff. I have outputted to the screen the html that it using to update. And put the code together as if it was normal jquery.
You cannot have linefeeds in strings unless you use template literals - also you had nested double quotes which also does not work.
In the original code you replaced a header cell with a table row which also did not compute.
This might be what you want:
$(".rowIWanTtoReplace").replaceWith(`<tr>
<td rowspan="11" class="tvmStatus">TVM Status</td>
<td rowspan="8">Component Events</td>
<td>t</td>
<td>n</td>
</tr>
<tr><td>u</td><td>n</td></tr>
<tr><td>v</td><td>n</td></tr>
<tr><td>w</td><td>n</td></tr>
<tr><td>x</td><td>n</td></tr>
<tr><td>y</td><td>n</td></tr>
<tr><td>z</td><td>n</td></tr>`)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="station-device-table4">
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr class="rowIWanTtoReplace">
<td rowspan="11" class="s">foobar</td>
<td rowspan="7">foobar</td>
<td>n</td>
</tr>
</table>