to remove extra blank space inside square brackets - javascript

[1]: http://jsfiddle.net/uZRQt/1/
This is the link which can be used to remove all html tags inside the square brackets but should include the () round brackets inside teh square brackets.
Now can the regex be modified to remove all the html tags , and blank spaces (&nbps) should be removed but the content inside round bracket should be included :-
for example :-
'<table style="height: 1000px; ; width: 500px;" border="1"> <tbody> <tr> <td>[<span>Assignment name</span>]</td> <td>[<span> Total No of staff-months of(hdhdhdh) the assignment</span>]</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table>'
should give output as
'<table style="height: 1000px; ; width: 500px;" border="1"> <tbody> <tr> <td>[Assignment name]</td> <td>[Total No of staff-months of(hdhdhdh) the assignment]</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table>'


I changed to single quotes for the main string like in http://jsfiddle.net/uZRQt/1/ and the alert works and returns what you asked. But was that the result you were asking for? I haven't understood completely your question.


can the regex be modified to remove all the html tags , and blank
spaces (&nbps) should be removed but the content inside round bracket
should be included :-
Check this one remove All tags and
regex:(?<=\[.*) (<[/]?[^>]*?>| )(?=.*\])

Related

trying to remove the date from all thr rows of my table

with javascript, i am trying to get rid of all the dates and only keeping the time from all my rows of the table
here is the screenshot i am taking about
i cannot use the id or class of the td because its dynamic.
i am trying to ynderstand how can i loop it over to make it work
here is my piece of code i have
var header = document.getElementsByClassName('flightData1')[0];
var dateField = ?
also trying to add some condition here that if the records are not in todays date, remove those rows
here is my html
<table border="0" cellpadding="0" id="iFlightTable" class="cellpadding3 styled-table">
<tbody>
<tr class="flightData1" id="AS 2224_2023-02-09T21:17:00_Anchorage_row">
<td id="Alaska Air"> Alaska</td>
<td> 2224</td>
<td> Anchorage</td>
<td id="1676006220000"> 9:17P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 2224_2023-02-09T21:17:00_bags"> </td>
<td id="AS 2224_2023-02-09T21:17:00_gate">2A</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="flightData2" id="AS 657_2023-02-09T16:35:00_Las Vegas_row">
<td id="Alaska Air"> Alaska</td>
<td> 657</td>
<td> Las Vegas</td>
<td id="1675989300000"> 4:35P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 657_2023-02-09T16:35:00_bags"> </td>
<td id="AS 657_2023-02-09T16:35:00_gate">1</td>
<td> </td>
<td> </td>
<td> </td>
</tr> </tbody>
</table>

let dateFields = document.querySelectorAll('#iFlightTable tr td:nth-child(4)');
dateFields.forEach( field => {
field.innerText = field.innerText.split(/\s/)[0];
});
<table border="0" cellpadding="0" id="iFlightTable" class="cellpadding3 styled-table">
<tbody>
<tr class="flightData1" id="AS 2224_2023-02-09T21:17:00_Anchorage_row">
<td id="Alaska Air"> Alaska</td>
<td> 2224</td>
<td> Anchorage</td>
<td id="1676006220000"> 9:17P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 2224_2023-02-09T21:17:00_bags"> </td>
<td id="AS 2224_2023-02-09T21:17:00_gate">2A</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="flightData2" id="AS 657_2023-02-09T16:35:00_Las Vegas_row">
<td id="Alaska Air"> Alaska</td>
<td> 657</td>
<td> Las Vegas</td>
<td id="1675989300000"> 4:35P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 657_2023-02-09T16:35:00_bags"> </td>
<td id="AS 657_2023-02-09T16:35:00_gate">1</td>
<td> </td>
<td> </td>
<td> </td>
</tr> </tbody>

Adding Image on html table dynamically using JQuery

I am trying to adding image on html table dynamically using JQuery, but I am confusing how to find out a table 2,3..etc tr with in first td to add image.
My table structure has no id or class how to find, but before table have some text as below.
<table width="100%" border="0" cellspacing="1" cellpadding="5">
<tbody>
<tr valign="top">
<td colspan="2"><b>Order Details:</b><br> <br>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
<b>Code</b>
</td>
<td>
<b>SKU</b>
</td>
<td>
<b>Quantity</b>
</td>
<td>
<b>Price</b>
</td>
<td>
<b>Grand Total</b>
</td>
</tr>
<tr>
<td>10172</td>
<td>Product 1<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>
₹ 250.00
</td>
</tr>
<tr>
<td>10165</td>
<td>Product 2<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>₹ 250.00
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Subtotal: </td>
<td>₹ 250.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Tax: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Shipping Cost: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Grand Total: </td>
<td>₹ 250.00</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody></table>
How to Add product Image before of the SKU.
Any help plz..?

As you don't have a thead or even use th for the headers, you'll have to skip the first row, you can use ">" to specify the direct hierarchy, eg:
$("table>tbody>tr>td>table>tbody>tr:not(:first-child)").each(function() {
var codecell = $(this).find("td:eq(0)");
var img = "/pathtoimage/" + codecell.text() + ".jpg"
codecell.after("<td><img src='" + img + '/></td>");
});
Updated: Fixed typo for ("td:eq(0)") vs ("td").eq(0) vs ("td")[0]

How to Get text from table cell

This is what i have right now:
This is the table:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</table>
This is the javascipt
<script>
function hello(){
var r = document.getElementById("trId1").innerHTML;
alert(r);
}
</script>
The JavaScript gets E100 when its the first row is clicked which is correct but when E200 row is clicked it still shows E100, how would i get E200 and so on when there is more data? Is there a javascript only solution

To start, you can't have two Id's on the page that are the same as that is invalid HTML5 and will cause errors in some browsers. The reason why you're getting what you're getting is because when looking for an ID, most browsers only look for one occurrence of an ID (because that is precisely what valid HTML is, 1 unique id per page). So to fix up your HTML code and you may also want to have a header for your table:
<table border='1'>
<thead>
<tr>
<th>
Employee Code
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
<tr class='display' onclick='hello(1);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(2);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</tbody>
</table>
Your best bet is to getElementsByClassName function and traverse the array to the one you want. (general change, code) Assuming you can't use JQuery at all for some reason:
<script>
function hello(rowClickedNumber){
var RowClicked = document.getElementsByClassName("trId1");
var r = RowClicked[0].innerHTML;
alert(r); //E100
var r = RowClicked[1].innerHTML;
alert(r); //E200
var r = RowClicked[rowClickedNumber].innerHTML;
alert(r);
}
</script>
However, an even simpler solution would be to use JQuery and would limit browser inconsistencies. After the document loads:
$(body).on("click", "tr", function(){
var getData =$(this).children(".trId1").getHTML();
console.log(getData);
});
Note: this is to allow when you inevitably add more items to the table (hence the reason why the code to get a child element of a row).
*EDIT: added the note
**EDIT: fixed the spelling and grammer
* EDIT: fixed the javascript function.

I have a solution for this. Please check the code and fiddle link below. Let me know if you have any question.
Fiddle
HTML:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
</table>
JavaScript:
function hello(obj){
alert(obj.childNodes[1].innerText); //The first child being a text node.
}

How to replace text in a table using Jquery(or Javascript)?

I have a table
<table id="t">
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
</table>
i want to replace "abc"(in td) with "abc" as in the following
<table id="t">
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
</table>
i googled for the solution but didn't find any.
Thanks in advance.

You can do:
$('td').html(function(i, html){
return html.replace(/abc/g, '<span class="c2">abc</span>');
});
This goes through each <td>, looks at its text, then replaces every occurrence of abc with abc wrapped in the span you want.

Something like:
$('td').each(function () {
$(this).html($(this).html().replace('abc', '<span class="c2">abc</span>'));
});
http://jsfiddle.net/Ru8XX/

Try this:
$('#t td').each(function(){
$(this).html( $(this).html().replace("abc","<span class='c2'>abc</span>") );
});

GreaseMonkey editing Page

How can I change a page with this html code :
<tr>
<td nowrap title="7884">Ontem foi dia de</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td align="right">6,0</td></tr>
<tr>
to this one using greasemonkey :
<tr>
<td title="7884" nowrap="nowrap">ontem foi dia de</td>
<td> </td>
<td title="aprovadissimo" align="center" bgcolor="#ff8888">A</td>
<td title="Treze" align="center" bgcolor="#88ff88">13</td>
<td> </td>
<td bgcolor="#88ff88">Aprovado</td>
<td align="right">6,0</td></tr>
<tr>

have a look at http://diveintogreasemonkey.org/ and see about writing GreaseMoney Scripts

How are you determining which table cells should have which certain values in them? What are the rules you're going to have for this?

Categories

Resources