I need to implement a RegExp in Javascript that allows me to match the following categories and items, associating the items to their proper category, but I don't know how:
<table>
<tbody>
<tr>
<td>
text
</td>
</tr>
</tbody>
</table>
<div>
<table>
<tbody>
<tr>
</td>
text
<td>
</tr>
<tr>
</td>
text
<td>
</tr>
<tr>
</td>
text
<td>
</tr>
.....................
</tbody>
</table>
</div>
<table>
<tbody>
<tr>
<td>
text
</td>
</tr>
</tbody>
</table>
I can have more than 10 categories, and I don't know how many items will be in each category.
I could easily create a RegExp that matches me the categories and another one for the items, but how can I create a relation between them?
Thanks and best regards,
Livio
Don't read HTML using Regexes. Give the tables classes and then read them with DOM traversal. The HTML should look like this:
<table class="caption">
<tbody>
<tr>
<td>
text
</td>
</tr>
</tbody>
</table>
<div>
<table class="itemlist">
<tbody>
<tr>
</td>
text
<td>
</tr>
<tr>
</td>
text
<td>
</tr>
<tr>
</td>
text
<td>
</tr>
.....................
</tbody>
</table>
</div>
<table class="caption">
<tbody>
<tr>
<td>
text
</td>
</tr>
</tbody>
</table>
...
Then make a list of them like this:
var captions = document.getElementsByClassName("caption");
var itemlists = document.getElementsByClassName("itemlist");
var items = new Array();
for (var i=0; i<captions.length; i++) {
var categoryLink = captions[i].getElementsByTagName("a")[0];
var categoryItems = itemlists[i].getElementsByTagName("a");
for (int j=0; j<categoryItems.length; j++) {
items.push({"itemname":categoryItems[j].innerHTML,
"itemurl":categoryItems[j].href,
"categoryname":categoryLink.innerHTML,
"categoryurl":categoryLink.href});
}
}
Regular Expressions is not the silver bullet for all the problems.. RegEx is made for text matching using patterns. IMHO this problem is better solved using any XML parser.
Related
Suppose I have two different tables as below:
<table id="T1">
<tr id="a">
<td>a</td>
</tr>
<tr id="b">
<td>b</td>
</tr>
</table>
<table id="T2">
<tr id="a">
<td>A</td>
</tr>
<tr id="b">
<td>B</td>
</tr>
</table>
These two tables have different IDs. However, due to design, some of their rows, when created, have the same IDs. In this case, both rows have the same ids a and b.
I am having trouble accessing rows by using document.getElementById since it could be multiple duplication. How do I specify a row using both the table ID and the row ID in JavaScript? Thanks.
You should never ever use the same ID twice! That said, you can use document.querySelectorAll() where you can use the same selectors as you use in CSS. Something like so to get all <tr>
var rowsOfTable1 = document.querySelectorAll('#T1 tr');
var rowsOfTable2 = document.querySelectorAll('#T2 tr');
rowsOfTable1.forEach( row => { console.log(row.innerHTML) });
rowsOfTable2.forEach( row => { console.log(row.innerHTML) });
<table id="T1">
<tr id="a">
<td>T1 a</td>
</tr>
<tr id="b">
<td>T1 b</td>
</tr>
</table>
<table id="T2">
<tr id="a">
<td>T2 A</td>
</tr>
<tr id="b">
<td>T2 B</td>
</tr>
</table>
or you can be more specific with the selector. If you know you only want to get 1 item you can also use Document.querySelector() which will not return an array but just the single item, something like:
var aOfTable1 = document.querySelector('#T1 #a');
var bOfTable2 = document.querySelector('#T2 #b');
console.log(aOfTable1.innerHTML);
console.log(bOfTable2.innerHTML);
<table id="T1">
<tr id="a">
<td>T1 a</td>
</tr>
<tr id="b">
<td>T1 b</td>
</tr>
</table>
<table id="T2">
<tr id="a">
<td>T2 A</td>
</tr>
<tr id="b">
<td>T2 B</td>
</tr>
</table>
or you could select all <tr> elements with an id like:
var rowsOfTable1 = document.querySelectorAll('#T1 tr[id]');
Here is what I have. Nothing has IDs, Names or Classes.
Is there anyway to enter a vaue in the input field under City using the Chrome Console and js? Alternatively is there a way I can print the value of said field also using js in the Chrome Console?
I assume it requires using the div City and traversing to next input.
Thanks ahead of time!
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>Address</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>City</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>Zipcode</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
document.getElementsByTagName("table")[3].getElementsByTagName("input")[0].value="your value"
The boilerplate code
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
try {
var field = document.getElementsByTagName("table")[i].getElementsByTagName("div")[0].textContent;
if (field == "City") {
document.getElementsByTagName("table")[i + 1].getElementsByTagName("input")[0].value = "your values"
}
} catch (err) {}
}
I want to select all first td values using JQuery.
Here is my code:
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
I want to get only 2 td (Status.Worksheet ID) elements from my above code using JQuery
You can pass any valid CSS selector to JQuery, so all you need is:
$("td:first-child");
// This will find and group together all the `<td>` elements that are the first ones
// within their parent (<tr>).
var $results = $("td:first-child");
// You can loop over the set and work with the individual DOM elements...
$results.each(function(index, result){
// result is the DOM element we're looping over
console.log(result.textContent);
});
// Or, you can access a specific element by index:
console.log($results[0].textContent + ", " + $results[1].textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;"><table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
This is my FIDDLE
<table>
<tr>
<td>
<div style="background:blue;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:blue;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green;color:white">hello</div>
</td>
</tr>
</table>
How do i rearrange the html table rows based on color? I want to group html table rows based on the background color of the rows.
Use sort() to sorting array of tr elements. You can get backgroud-color of element in function of sort and set arrangement of every element.
$("table tr").sort(function (a, b){
return $("div", b).css("background") < $("div", a).css("background") ? 1 : -1;
}).appendTo('table');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div style="background:blue">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:blue">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green">hello</div>
</td>
</tr>
</table>
I reviewed your question, I think you want to differentiate each tr by there color, adding html, style and script for you here.
Here is the Html
<table>
</tbody>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
</table>
Do add this script, by this function all your tr will have unique classes. you can add there background colors etc style on the base of class
<script>
// please do add jQuery file to prevent error
function adddClass() {
for(i=1; i<=6; i++) {
alert("");
jQuery('table tr:nth-child('+ i +')').addClass("color"+i);
}
}
adddClass();
</script>
Here is the style for background color of each table row tr
<style>
.color1{background-color:orange;}
.color2{background-color:teal;}
.color3{background-color:red;}
.color4{background-color:#717171;}
.color5{background-color:khaki;}
.color6{background-color:lightgray;}
tr, table, body{width:100%;}
</style>
Hope this will help, Thanks.!
You can easily do it in javascript.
Initiate an empty js object like this var colorRowmap = {}
Loop through all elements(tr elements) of table and get colorName from each tr. And if that color does not exist as a key of colorRowMap object do colorRowMap[colorName] = [currentTableRow] else do colorRowMap[colorName] = colorRowMap[colorName].push(currentTableRow)
Empty the table.
Loop through all keys of colorRowMap and push the tr roows to table.
Done. :)
I am using CKEditor 4.3.3, Where i have added table .Now table structure looks like given below
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Now i am able to select table using javascript as
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent();
Now i want to add html text before <tbody> start and after <table> start .
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().appendHtml("<!-- <div>" +html+"</div> -->");
I am using this to append HTML. But for prepending HTML i am not able to find any API
Is there any alternatives?
I want output to be like this
<table>
<!-- <div>testing</div> -->
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody></table>
you can use any jquery functions by
var html=CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().getParent();
$(html.$).prepend("hi");
You can use this
var editor = CKEDITOR.instances.ficeditor;
var data = $("<div>"+editor.getData()+"</div>");
data.prepend("top line");
editor.setData(data.html());