I have below html line,
Origional Code :
<td width="9%" height="5%">
<p class="idnumber" title="{{val.customerTypeDescNM}}">
{{val.customerTypes}}</p>
</td>
<td width="9%" height="5%">
<p class="idnumber" title="FTG,EMA,CAS">FTG,EMA,CAS</p>
</td>
What I am stuck in here is, If I move the cursor on this td, I am getting "FTG,EMA,CAS" this as on title tag which is correct, but I want if my cursor is on FTG only, it should show me FTG in title tag. I am using angular js for this.
Dynamic Span
<td width="9%" height="5%">
<span title="{{val.customerTypeDescNM[$index]}}" ng-repeat="item in val.customerType.split(',') track by $index">{{item}}</span>
</td>
Instead of <p> tag, you can have 3 separate span tags with an individual item and separate title. You don't need angular for that.
<td width="9%" height="5%">
<span class="idnumber" title="FTG">FTG,</span>
<span class="idnumber" title="EMA">EMA,</span>
<span class="idnumber" title="CAS">CAS</span>
</td>
Add title attribute to each text:
<td width="9%" height="5%">
<p class="idnumber" title="FTG,EMA,CAS">
<span title="FTG">FTG<span>,
<span title="EMA">EMA</span>,
<span title="CAS">CAS</span>
</p>
</td>
If I understood your question correctly, You need separate span tags with title tags for each. You may have to use ng-repeater for this.
<td width="9%" height="5%">
<p class="idnumber" title="{{val.customerTypeDescNM}}">
<span ng-repeat="tag in val.customerTypes.split(',')" title="tag">
{{tag}}
</span>
</p>
</td>
Related
I have a piece of HTML table which is returned by the server and it looks like following:
<tbody>
<tr role="row" class="odd even pointer">
<td class="" width="5%" tabindex="0">
<ul class="enlarge">
<li>
<img src="" width="60px" height="60px">
<span>
<img src="">
</span>
</li>
</ul>
</td>
<td class="sorting_1" width="75%" data-url="" data-title="Sai Baba Nag Champa Incense 250 Gram, New, Free Shipping" data-price="11.25" data-image="" data-itemid="251908749939"> </td>
<td class="sorting_1" style="text-align:left;" width="10%">
£ 11
</td>
</tr>
</tbody>
What I'm currently doing is injecting the entire HTML in my DOM right away... But instead of doing it like this:
var dbtb = $('#datatable-responsive', data).html();
console.log(dbtb);
$('#datatable-responsive').html(dbtb
I would like to first fetch all the TR's from the table, and then append them directly into the table itself in DOM, but through a for/foreach loop?
How could I achieve this?
Not sure what you are trying to achieve. My best guess is you are trying to copy those rows to another table. If that's the case it should be as simple as:
$('table tr').appendTo('#target');
assuming that <table id="target"> is the target one
I have this table and I want to access the prod_sku value and define it as a variable:
<tr class="border first last" id="order-item-row-386470">
<td><h3 class="product-name">prod_name</h3>
</td>
<td data-rwd-label="SKU">prod_sku</td>
<td class="a-right" data-rwd-label="Preço">
<span class="price-excl-tax">
<span class="cart-price">
<span class="price">prod_price</span>
</span>
</span>
<br>
</td>
</tr>
I get this table with this line:
data = document.getElementsByClassName("odd")[0].innerHTML;
From this tbody
<tbody class="odd">
<tr class="border first last" id="order-item-row-386470">
<td><h3 class="product-name">prod_name</h3>
</td>
<td data-rwd-label="SKU">prod_sku</td>
<td class="a-right" data-rwd-label="Preço">
<span class="price-excl-tax">
<span class="cart-price">
<span class="price">prod_price</span>
</span>
</span>
<br>
</td>
<td class="a-right" data-rwd-label="Qtd">
<span class="nobr">
Solicitado: <strong>1</strong><br>
</span>
</td>
<td class="a-right last" data-rwd-label="Subtotal">
<span class="price-excl-tax">
<span class="cart-price">
<span class="price">prod_price</span>
</span>
</span>
<br>
</td>
</tr>
</tbody>
How can I access prod_sku?
You can use a query selector to match the data-rwd-label attribute.
document.querySelector('td[data-rwd-label=SKU]').innerHTML
If you don't have to support stone age browsers, then you can use querySelector to grab your td based on data attribute. If you have to support a myriad of outdated browsers and you need to d a lot of these types of lookups, then jquery is quite good at it.
var data = document.querySelector('td[data-rwd-label="SKU"]').innerHTML;
But would be more interesting to improve the html structure of your table.
I'm trying to figure out how to add a textbox to the last column of each row on a site. My Java/JQuery experience is quite limited and can't really wrap my head around this one.
I've pasted the code for one of the tables below.
I've tried getElementsByClassName, but not sure what to call.
Any help would be much appreciated!
<tbody>
<tr id="g_1_hKWlkSGU" class="tr-first stage-scheduled" style="cursor: pointer;" title="">
<td class="cell_ib icons left">
<span class="icons left">
<span class="tomyga icon0">
</span>
</span>
<div data-context="g:g_1_hKWlkSGU" class="mg_dropdown">
<div class="mg_dropdown_wrapper">
<span class="mg_dropdown_selected">-</span><span class="down_arrow">
</span>
</div>
</div>
</td>
<td class="cell_ad time">19:45</td>
<td class="cell_aa timer">
<span> </span>
</td>
<td class="cell_ab team-home"><span class="padr">Barcelona</span>
</td>
<td class="cell_sa score">-</td>
<td class="cell_ac team-away">
<span class="padl">Celtic</span>
</td>
<td class="cell_sb part-top">
<span class="icons">
<span class="live-centre">
</span>
</span>
</td>
<td class="cell_ia icons">
<span class="icons">
<span class="tv icon1">
</span>
</span>
</td>
<td class="cell_oq comparison" title="">
<span class="icons" title="">
<span class="slive icon0 xxx" title="This match will be available for LIVE betting!">
</span>
</span>
</td>
</tr>
</tbody>
I'm trying to parse this HTML:
<tr id="a">
<td class="classA">
<span class="classB">Toronto</span>
</td>
<td class="classC">
<span class="classD">Winnipeg</span>
</td>
</tr>
<tr id="b">
<td class="classA">
<span class="classB">Montreal</span>
</td>
<td class="classC">
<span class="classD">Calgary</span>
</td>
</tr>
I have a variable team. I want to find the <span> that contains team. Then I want to navigate up to the <tr> and pull the id from it.
I tried:
var team = "Toronto";
var id = $("span:contains(" + team + ")").parent().parent().attr('id');
But it comes back undefined. I know the selector is right, because $("span:contains(" + team + ")").attr('class') comes back with classB. So I can't figure out what's wrong with my query. Can anyone help?
Edit: Here's the JSFiddle.
Your html is invalid but your selector is correct, you need to put tr in table tag for valid html. You better use closest("tr") instead of .parent().parent()
Live Demo
<table>
<tr id="a">
<td class="classA"> <span class="classB">Toronto</span>
</td>
<td class="classC"> <span class="classD">Winnipeg</span>
</td>
</tr>
<tr id="b">
<td class="classA"> <span class="classB">Montreal</span>
</td>
<td class="classC"> <span class="classD">Calgary</span>
</td>
</tr>
</table>
It's not working becuase the browser's automatically fixing your HTML. You can't have a TR without a table so it's just throwing it away. All that's actually part of the DOM by the time your JavaScript runs is the spans.
Wrap it in a <table> and your code will work. Even better wrap it in <table><tbody> because the browser will still be making a tbody for you with just a table & that might cause confusion next (If you look at the parent of the TR).
Currently your HTML markup is invalid, you need to wrap <tr> element inside <table>:
<table>
<tr id="a">
<td class="classA"> <span class="classB">Toronto</span>
</td>
<td class="classC"> <span class="classD">Winnipeg</span>
</td>
</tr>
<tr id="b">
<td class="classA"> <span class="classB">Montreal</span>
</td>
<td class="classC"> <span class="classD">Calgary</span>
</td>
</tr>
</table>
Also, it's better to use .closest() as well as .prop() instead of .parent() and .attr()
var id = $("span:contains(" + team + ")").closest('tr').prop('id');
Fiddle Demo
try:
var id = $("span:contains(" + team + ")").parent('td').parent('tr').attr('id');
Your code works good.Just wrap your code into <table></table>
HTML
<table>
<tr id="a">
<td class="classA">
<span class="classB">Toronto</span>
</td>
<td class="classC">
<span class="classD">Winnipeg</span>
</td>
</tr>
<tr id="b">
<td class="classA">
<span class="classB">Montreal</span>
</td>
<td class="classC">
<span class="classD">Calgary</span>
</td>
</tr>
</table>
Script
var team = "Toronto";
var id = $("span:contains(" + team + ")").closest('tr').prop('id');
console.log(id)
http://jsfiddle.net/7Eh7L/
Better use closest()
$("span:contains(" + team + ")").closest('tr').prop('id');
I need to grab the value inside <span> of each <tobdy>. I know the html is not well-formed, because I didn't write it. That's how SharePoint renders it, and it is in fact bad html. But the question is how do i interate through each and grab the numeric values inside of brackets i.e 122, 87, and 13 using jQuery? Is this doable?
Here is a quick fiddle: http://jsfiddle.net/traFg/
<TBODY id=titl386-1_ groupString="%3B%23Completed%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> (122) </SPAN>
</TD>
</TR>
</TBODY>
<TBODY id=titl386-1_ groupString="%3B%23InProgress%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> (87) </SPAN>
</TD>
</TR>
</TBODY>
<TBODY id=titl386-1_ groupString="%3B%23NotStarted%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> (13) </SPAN>
</TD>
</TR>
</TBODY>
like this
jQuery('tbody span').each(function()
{
alert(jQuery(this).text().match(/\d+/));
})