I wanna know how can I get a value of a child of a child. I have this...
<table id="table4">
<tr>
<td>Id:</td>
<td>Name:</td>
</tr>
<tr>
<td>1515</td>
<td>Thiago</td>
</tr>
</table>
In Jquery, I wanna do something like this...
var id = $("#table4:nth-child(2) tr:nth-child(1)").val();
How can I do this work? The first <td> of the second <tr>. I know that I can use "class" and "id" to make it easier, but in this case I can't do that for others reasons.
PS. Sorry about the bad English, I'm a noob in this language.
Thanks.
Like this:
var id = $("#table4 tr:nth-child(2) td:nth-child(1)").text();
You can test it out here. The :nth-child selector applies to the child, for instance the first is saying "a <tr> that is a second child of its parent", rather than your attempted version, which would mean "the second child of this <tr>".
Also, use .text() to get an elements text, rather than .val() which is for input type elements.
This isn't a fully jQuery solution, but just thought I'd point out that you could do this:
var txt = $("#table4")[0].rows[1].cells[0].innerHTML;
Or if there will be any HTML markup you want to avoid, you could do this:
var cell = $("#table4")[0].rows[1].cells[0];
var txt = cell.innerText || cell.textContent;
Related
I'm trying to compare two lists by using only scala templates from play framework. My goal is to show all items listA in a table and then find out if listA has objects containing the same values as in listB to change the appearence of the duplicated items.
So let's assume a.id has an equivalent b.id, then i want a.id to appear in the list but crossed-out.
Example Input: listA has 5 objects with the attributes name and id. listB has 2 objects with the attributes id and xxx.
Desired Output: I want to display all items from listA (using the first scala #for loop), but if the id already exists in listB, i want the item to be crossed out in my table.
This is what i got so far:
<tbody>
#for(a <- aList){
#for(b <- bList){
<thead>
<tr>
<th>Key</th>
<th>Name</th>
</tr>
</thead>
#if(a.id == b.id){
<tr>
<td><s>#a.id</s></td>
<td><s>#a.name</s></td>
</tr>
} else {
<tr>
<td>#a.id</td>
<td>#a.name</td>
</tr>
}
}
} </tbody>
So far the code works, but now every element from listA appears as many times as the second loop goes through, which absolutely makes sense, but how can i prevent that?
You should probably do this in Scala code, rather than inside the template.
What you want is listA with a Boolean for each element telling you if it's in listB. Here's a simple way to do this:
val listAWithBool = listA.map(a => (a, listB.map(_.id).contains(a.id)))
Then, in your for loop, you can do
#for((a,inB) <- listAWithBool){
#if(inB){
...
} else {
...
}
}
EDIT
Since you're using Play Java, most of what I wrote previously will be hard to put in code, since it's functional programming. A possible solution is to put all that in your template, which allows scala code; just put this at the top of your template (under the list of parameters):
#listAWithBool = #{
listA.map(a => (a, listB.map(_.id).contains(a.id)))
}
Now to explain the weird for((a, inB) <- listAWithBool) syntax: just as for(a <- listA) means "extract all values from my list and do the following with each of them, giving it the name a", this now means "extract all pairs of values from my list and do the following with each of them, giving name a and inB to its two elements.
Remember that we have built listAWithBool to be a list of pairs (as return type of the lambda) of type List[A, Boolean], so the compiler will be able to understand that a is of type A and inB is of type Boolean.
var valueA= document.getElementById(#a.id);
var valueB= document.getElementById(#b.id);
#if(valueA == valueB){
}
Or
You can use
if(valueA.contains(valueB)){
}
Is there any way directly get the parent element to find its attributes?
In my situation, I have a
DOMElement img,I have to use functions
img.getparent().getparent().findElement(By.tagName("a")).getAttribute("href"));
and the result is not accuarate since a parent node can find many same type of elements
<td>
<img></img>
<a></a>
<a></a>
<a></a>
<a></a>
</td>
Cast DOMNode to DOMElement and use it's .getAttribute(String attr):
String href = ((DOMElement)(img.getparent())).getAttribute("href");
<tr>
<td width="70"><strong>Director:</strong></td>
<td><a href="/?&director=Zhangke Jia">Zhangke Jia</td>
</tr>
I try to do this parser but not working
foreach($html->find('strong.Director:') as $titlu) {
echo $titlu->find('a', 0)->plaintext;
}
In need some help please
It is not working because 'Director' is not a class name, It's just a text inside 'td > strong' tag.
These are the ways you can find html dom elements:
Finding HTML elements by id
Finding HTML elements by tag name
Finding HTML elements by class name
Finding HTML elements by HTML object collections
try this:
foreach($html->find('td a') as $titlu) {
echo $titlu->plaintext;
}
I would like to query a particular cell of a table in order to change its text or inner HTML.
A sample of the table:
<table id="infotable">
<thead></thead>
<tbody id="tData">
<tr>
<td>SomeCompany1</td>
<td>SomeProduct1</td>
<td>PriceType1</td>
<td id="164">Awaiting data...</td>
</tr>
[...]
The third cell of the first row of the above table is my target which I have identified with the attribute id="164".
In the Dart script, I have attempted two means of querying this cell:
TableCellElement cell = document.query('#164');
and
var cell = query('#164');
Both result in the following error in the Dart editor:
'Error: SyntaxError: DOM Exception 12'
I had this written out when I came across the answer in another SO post, but in the context of jQuery. It turns out the problem was that the id attribute was not allowed to begin with a digit.
Prepending a character to the beginning of the attribute value solved this issue (e.g. the q in id="q164".
I have a knockout viewmodel getting populated from a JSON call.
In a select element in a form, I have a set of options (also coming from viewmodel) and the value, part of observableArray.
The issue is only with the select element and not with input ones -- when submitting the form, only the values that have been assigned to in select contain proper values. So the ones that have been successfully loaded from JSON and presented in form, but left unchanged, will be sent back to server as the first value from the options array.
HTML Form:
<form>
<table >
<thead>
...
</thead>
<tbody data-bind='foreach: ScaledCostEntries'>
<tr>
<td><input data-bind='value: StartDateString' class="startdate" type="text"/></td>
<td><select data-bind='value: InvoiceType, options: $root.InvoiceTypes'></select></td>
<td><a href='#' data-bind='click: $root.removeCost'>Delete</a></td>
</tr>
</tbody>
</table>
<button data-bind='click: addCost'>Add New Row</button>
<button data-bind='click: save' >Update</button>
</form>
In this code above the problem is with InvoiceType, part of the viewmodels ScaledCostEntries observableArray. (Also, if I swap the order of value and options, that will not put a selected value in the select element).
and the JS:
<script type="text/javascript">
$(function () {
var scaledCostModel = function () {
var self = this;
self.ScaledCostEntries = ko.observableArray([]);
self.InvoiceTypes = ko.observableArray([]);
self.addCost = function () {
self.ScaledCostEntries.push({
StartDateString: ko.observable(),
InvoiceType: ko.observable()
});
};
self.removeCost = function (cost) {
cost.IsDeleted = true;
self.ScaledCostEntries.destroy(cost);
};
self.save = function (form) {
jQuery.ajax({
url: '#Request.Url.PathAndQuery',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: ko.toJSON(self.ScaledCostEntries)
});
};
};
jQuery.getJSON('#Request.Url.PathAndQuery', function (data) {
ko.mapping.fromJS(data, {}, viewModel);
});
var viewModel = new scaledCostModel();
ko.applyBindings(viewModel);
});
</script>
So, to summarize, the issue is with viewmodel's property bound to a select element. When the select is left unchanged (not reselected), the viewmodel will have it's value as the first item from the options (InvoiceTypes) array, when posting to server.
In the end, I might be forgetting something trivial and this is my first more serious knockout.js attempt.
Note: InvoiceType is part of the ScaledCostEntries, which is observableArray.
InvoiceTypes is observableArray.
Both InvoiceTypes and ScaledCostEntries, come from JSON and ScaledCostEntries is sent back.
My assumption is that this is due to how the ScaledCostEntries are being handled on the server on the form submission.
I've run into the problem before (across various server-side frameworks) when I have a main model with a list of dependent models that are being added and removed, and a form submission is done against the main model to update everything.
The problem is that during form submission, when the values in the request are being mapped to the server-side model, blank values are taken to mean "no change" as opposed to "delete this". This works well with properties directly on a model, but doesn't work for lists of dependent models.
There are a couple of ways I've found of dealing with this: use Ajax to delete the underlying model and update the relationship with the main model when the 'remove' or 'delete' button is pressed in the view; or explicitly send the whole list of models each time and explicitly delete and rebuild the list on the server for each form submission. Each are applicable in different situations, and there are probably other approaches that may work well, too.