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>
Related
I'm using Angularjs to repeat some elements in my HTML. Angular repeats the divs correctly, but when trying to repeat an specific div it just doesn't work. Explanation after the code:
<tr ng-repeat="x in controlList" class="tr-shadow">
<td>{{x.fecha_control}} </td>
<td>{{x.hora}}</td>
<td class="desc">{{x.valor}}</td>
<td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
<td>
<span class="status">{{x.momento}} </span>
</td>
<td>
<div class="table-data-feature">
<button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="zmdi zmdi-edit"></i>
</button>
<button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
<i class="zmdi zmdi-delete"></i>
</button>
</div>
</td>
<tr class="spacer"></tr>
</tr>
Angular repeats everything inside <tr ng-repeat="x in controlList" class="tr-shadow"> </tr> BUT the last div <tr class="spacer"></tr>
If I comment the spacer the ng-repeat it does repeat the spacer, but if I don't the spacer only shows once at the end of the repeated code.
<!-- <tr class="spacer"></tr> -->
I tried changing the HTML Tag for spacer but I'm having the same issue.
As you can see in the Chrome's debugger, the spacer shows after the repeated code:
If you really want to include your spacer in your iteration there is another option called ng-repeat-start and ng-repeat-end
Something like the following should work
<tr ng-repeat-start="x in controlList" class="tr-shadow">
<td>{{x.fecha_control}} </td>
<td>{{x.hora}}</td>
<td class="desc">{{x.valor}}</td>
<td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
<td>
<span class="status">{{x.momento}} </span>
</td>
<td>
<div class="table-data-feature">
<button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="zmdi zmdi-edit"></i>
</button>
<button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
<i class="zmdi zmdi-delete"></i>
</button>
</div>
</td>
</tr>
<tr class="spacer" ng-repeat-end>...</tr>
You can find this exact information here on their documentation page.
<tr> inside <tr> is not valid html. You must include ng-class="{'spacer': someCondition}"
<tr ng-repeat="x in controlList" class="tr-shadow" ng-class="{'spacer': someCondition}>
Try to add condition ng-if="$last" to your spacer
I would like to know how can i refresh my without refresh the entire page in Javascript
Exemple of HTML
<table class="list" cellpadding="1" cellspacing="1">
<thead>
<tr>
<td class="checkbox edit"></td>
<td class="Element sortable" onclick="My.Game.List.sort(223, 'eleemnt');">Element</td>
<td class="ew sortable" onclick="My.Game.List.sort(223, 'ew');">Pop.</td>
<td class="distance sortable" onclick="My.Game.RaidList.sort(223, 'distance');">Distance</td>
<td class="element sortable" onclick="My.Game.List.sort(223, 'element');">Option</td>
<td class="last sortable" onclick="My.Game.List.sort(223, 'last');">Last</td>
<td class="action"></td>
</tr>
</thead>
<tbody>
<tr class="slotRow" id="slot-row-3021">
<td class="checkbox">
<input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
</td>
<td class="element">
Artic
</td>
<td class="ew">
31 </td>
<td class="distance">
2.2 </td>
<td class="Option">
<div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div> </td>
<td class="last">
<img src="img/x.gif" class="My Class"> // Might Change
<img src="img/x.gif" class="carry full" alt="My Alt // Might Change
18.09.18, 15:26 // Change
<div class="clear"></div>
</td>
<td class="action">
<a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
</td>
</tr>
</tbody>
</table>
Basicly i would like to refresh the content of all the row of my Table
I tried this but it seems not working i don't understand why :
JAVASCRIPT CODE :
setInterval(function() {
document.getElementsByTagName('table')[0].reload();
}, 500);
NB : The function is just a timer to refresh the table each 500 ms.
What is excepted to change :
<tr class="slotRow" id="slot-row-3021">
<td class="checkbox">
<input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
</td>
<td class="element">
Artic
</td>
<td class="ew">
31 </td>
<td class="distance">
2.2 </td>
<td class="Option">
<div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div> </td>
<td class="last">
<img src="img/x.gif" class="My Class"> // Might Change
<img src="img/x.gif" class="carry full" alt="My Alt // Might Change
18.09.18, 15:26 // Change
<div class="clear"></div>
</td>
<td class="action">
<a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
</td>
</tr>
Best regards !
There are a lot of answers to your question.
You could simply fix this by replacing the (inner)HTML of the element any time an update takes place.
Something like HTML : draw table using innerHTML
Messy, but it is the answer to your question.
Your HTML is not dynamicly updating values, that would be done trough javascript. If you are getting your values from a webservice - look into AJAX.
I do a curl to a server to get the html data which I want to parse and store in a array.
I got this data
https://pastebin.com/7QB9BNut
Can anyone help me with regex to get and store the above data in array in this format.
[
["id","name","ip:port","map"]
]
example:
[
["1","Forever United","109.70.149.161:10480","Red Library Offices"],
["2","{KGB}Laura & Guns FuNHoUsE","63.141.226.61:9480","A-Bomb
Nightclub"],
and so on
]
Thanks
PasteBin wouldn't let me do an AJAX request because CORS so I had to dump the HTML in the script. But it seems to work.
let htmlString = `<tr>
<td>
1.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/109.70.149.161:10480/">
Forever United
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=109.70.149.161&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
16/18
</td>
<td>
</td>
<td>
<a href="/search/swat4/GB/">
<img src="/images/flags/gb.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">109.70.149.161</span><span class="port">:10480</span>
</td>
<td>
Red Library Offices
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/63.141.226.61:9480/">
{KGB}Laura & Guns FuNHoUsE
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=63.141.226.61&port=9480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
12/16
</td>
<td>
</td>
<td>
<a href="/search/swat4/US/">
<img src="/images/flags/us.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">63.141.226.61</span><span class="port">:9480</span>
</td>
<td>
A-Bomb Nightclub
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/163.172.55.136:10480/">
-==MYT Team Svr==-
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=163.172.55.136&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
16/16
</td>
<td>
</td>
<td>
<a href="/search/swat4/FR/">
<img src="/images/flags/fr.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">163.172.55.136</span><span class="port">:10480</span>
</td>
<td>
Children of Taronne Tenement
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/51.15.152.220:10480/">
-==MYT Team Svr==-
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=51.15.152.220&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
16/16
</td>
<td>
</td>
<td>
<a href="/search/swat4/GB/">
<img src="/images/flags/gb.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">51.15.152.220</span><span class="port">:10480</span>
</td>
<td>
Children of Taronne Tenement
</td>
</tr>
<tr>
<td>
5.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/31.186.250.32:10480/">
WWW.KNIGHTofSORROW.IN (Antics)
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=31.186.250.32&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
0/12
</td>
<td>
</td>
<td>
<a href="/search/swat4/DE/">
<img src="/images/flags/de.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">31.186.250.32</span><span class="port">:10480</span>
</td>
<td>
Food Wall Restaurant
</td>
</tr>
<tr>
<td>
6.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/158.58.173.64:16480/">
|SoH| Shadow Of Heroes
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=158.58.173.64&port=16480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
12/14
</td>
<td>
</td>
<td>
<a href="/search/swat4/IT/">
<img src="/images/flags/it.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">158.58.173.64</span><span class="port">:16480</span>
</td>
<td>
Children of Taronne Tenement
</td>
</tr>
<tr>
<td>
7.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/houseofpain.tk:10480/">
WWW.HOUSEOFPAiN.TK (Antics)
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=31.186.250.156&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
10/12
</td>
<td>
</td>
<td>
<a href="/search/swat4/NL/">
<img src="/images/flags/nl.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">31.186.250.156</span><span class="port">:10480</span>
</td>
<td>
A-Bomb Nightclub
</td>
</tr>`;
let html = document.createElement('table');
html.innerHTML = htmlString;
let results = Array.from(html.querySelectorAll('tr')).map(row => Array.from(row.querySelectorAll('td')).map(cell => cell.innerText.trim()).filter(data => data != ''));
console.log(results);
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 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.