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.
Related
Is there a way to remove the td(please see commented td"to be removed") from this table without editing the HTML.
Also, not using only the classes as I have the same classes in another tables that I don't need to be removed, so targeting the span id as well. Thanks in advance!
<div id="pnlPersonalDetails2">
</div><table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody><tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr><tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<!-- To be removed
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>-->
</tr>
</tbody></table>
<div id="pnlPersonalDetails3">
</div><table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody><tr>
<!-- To be removed
<td colspan="2" class="pd_question">
<span id="lbl3"></span>
</td>-->
</tr><tr>
<td class="pd_label">LAST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_3" type="text" id="Name微statictext_3" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl04" style="visibility:hidden;">Required Field</span>
</td>
</tr>
This is how it looks now
enter image description here
This is how I want to look after removing the commented td's
enter image description here
I have attached the entire code here https://codepen.io/duicug/pen/VGreQZ
<td id="hideTD" class="error_label" style="visibility: hidden;">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
<script>
document.getElementById("hideTD").style.visibility = "hidden";
</script>
You can refer this website , good sample https://www.w3schools.com/jsref/prop_style_display.asp
Hope that can help you.
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
<td colspan="2" class="pd_question">
<span id="lbl3"></span>
</td>
<script>
document.getElementById("ctl03").parentElement.remove();
document.getElementById("lbl3").parentElement.remove();
</script>
You could use querySelector to find the class such:
var target = document.querySelector("#pnlPersonalDetails2 .error_label");
There are then multiple ways to remove it from the DOM.
You could leave it in memory so that you can easily show it again later:
target.style.display = "none"; //Undo by setting to "" or to previous value
Or you could make it invisible which leaves it in memory and change the layout of surrounding contents:
target.style.visibility = "hidden"; //Undo by setting to "" or to previous value
Or you could completely remove it from the DOM:
target.parent.removeChild(target);
try it with jquery:
$("#lbl2").toggle();
maybe this will help you?
var el = document.getElementById('lbl2');
el.parentElement.hidden = true;
or remove td
var el = document.getElementById('ctl03');
el.parentElement.remove();
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>
Below is some mostly cleaned HTML output from Microsoft Excel, but there are a bunch of improperly nested <span> elements in there. What would be the best way to remove these elements using Javascript (ideally without relying on jQuery)?
I am already doing a lot of cleaning to get to this point, but removing the <span> elements is proving to be a challenge. Thanks for any advice you can offer!
<table>
<tbody data-key="10020">
<tr data-key="10009">
<span data-key="10002"><span data-offset-key="10002-0">
</span></span>
<td data-key="10004" style="text-align: left;"><span data-key="10003"><span data-offset-key="10003-0">Done</span></span></td>
<span data-key="10005"><span data-offset-key="10005-0">
</span></span>
<td data-key="10007" style="text-align: left;"><span data-key="10006"><span data-offset-key="10006-0">Yes</span></span></td>
<span data-key="10008"><span data-offset-key="10008-0">
</span></span>
</tr>
<tr data-key="10018">
<span data-key="10011"><span data-offset-key="10011-0">
</span></span>
<td data-key="10013" style="text-align: left;"><span data-key="10012"><span data-offset-key="10012-0">Done</span></span></td>
<span data-key="10014"><span data-offset-key="10014-0">
</span></span>
<td data-key="10016" style="text-align: left;"><span data-key="10015"><span data-offset-key="10015-0">Yes</span></span></td>
<span data-key="10017"><span data-offset-key="10017-0">
</span></span>
</tr>
</tbody>
</table>
I know you prefer a solution without relying on jQuery, But, This is here, as the fallback solution, if no one offers using pure javascript.
$(document).ready(function(){
$('tr > span').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody data-key="10020">
<tr data-key="10009">
<span data-key="10002"><span data-offset-key="10002-0">
</span></span>
<td data-key="10004" style="text-align: left;"><span data-key="10003"><span data-offset-key="10003-0">Done</span></span></td>
<span data-key="10005"><span data-offset-key="10005-0">
</span></span>
<td data-key="10007" style="text-align: left;"><span data-key="10006"><span data-offset-key="10006-0">Yes</span></span></td>
<span data-key="10008"><span data-offset-key="10008-0">
</span></span>
</tr>
<tr data-key="10018">
<span data-key="10011"><span data-offset-key="10011-0">
</span></span>
<td data-key="10013" style="text-align: left;"><span data-key="10012"><span data-offset-key="10012-0">Done</span></span></td>
<span data-key="10014"><span data-offset-key="10014-0">
</span></span>
<td data-key="10016" style="text-align: left;"><span data-key="10015"><span data-offset-key="10015-0">Yes</span></span></td>
<span data-key="10017"><span data-offset-key="10017-0">
</span></span>
</tr>
</tbody>
</table>
Assuming are you talking about client side JS running in a browser that has parsed the invalid HTML … you can't. The browser will have already performed error recovery at that point.
With pure ES5 javascript you can remove those elements, after browser rendering, with code below. It needs to be reverse because the returned HTMLCollection object have all elements in order they appear on the document, and it auto update itself to synchronize with the DOM tree. Some reference here.
var spans = document.getElementsByTagName('span')
for (var i = spans.length-1; i >= 0; i--) {
var elm = spans[i]
var parent = elm.parentNode
var txt = elm.innerText
parent.removeChild(elm)
if (txt) {
parent.innerText = txt
}
}
<table>
<tbody data-key="10020">
<tr data-key="10009">
<span data-key="10002"><span data-offset-key="10002-0">
</span></span>
<td data-key="10004" style="text-align: left;"><span data-key="10003"><span data-offset-key="10003-0">Done</span></span></td>
<span data-key="10005"><span data-offset-key="10005-0">
</span></span>
<td data-key="10007" style="text-align: left;"><span data-key="10006"><span data-offset-key="10006-0">Yes</span></span></td>
<span data-key="10008"><span data-offset-key="10008-0">
</span></span>
</tr>
<tr data-key="10018">
<span data-key="10011"><span data-offset-key="10011-0">
</span></span>
<td data-key="10013" style="text-align: left;"><span data-key="10012"><span data-offset-key="10012-0">Done</span></span></td>
<span data-key="10014"><span data-offset-key="10014-0">
</span></span>
<td data-key="10016" style="text-align: left;"><span data-key="10015"><span data-offset-key="10015-0">Yes</span></span></td>
<span data-key="10017"><span data-offset-key="10017-0">
</span></span>
</tr>
</tbody>
</table>
With ES6 you can do as below. Problems described before doesn't apply.
var spans = Array.from(document.getElementsByTagName('span'))
spans.forEach(function (elm) {
var txt = elm.innerText
if (txt) {
elm.parentNode.innerText = txt
}
elm.remove()
})
<table>
<tbody data-key="10020">
<tr data-key="10009">
<span data-key="10002"><span data-offset-key="10002-0">
</span></span>
<td data-key="10004" style="text-align: left;"><span data-key="10003"><span data-offset-key="10003-0">Done</span></span></td>
<span data-key="10005"><span data-offset-key="10005-0">
</span></span>
<td data-key="10007" style="text-align: left;"><span data-key="10006"><span data-offset-key="10006-0">Yes</span></span></td>
<span data-key="10008"><span data-offset-key="10008-0">
</span></span>
</tr>
<tr data-key="10018">
<span data-key="10011"><span data-offset-key="10011-0">
</span></span>
<td data-key="10013" style="text-align: left;"><span data-key="10012"><span data-offset-key="10012-0">Done</span></span></td>
<span data-key="10014"><span data-offset-key="10014-0">
</span></span>
<td data-key="10016" style="text-align: left;"><span data-key="10015"><span data-offset-key="10015-0">Yes</span></span></td>
<span data-key="10017"><span data-offset-key="10017-0">
</span></span>
</tr>
</tbody>
</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');