Cycle through input fields - html

I have a table which I'm populating with some data I get from a database query
Table example
<tr ng-repeat="row in reservasTable">
<td> {{row.L}} </td>
<td> {{row.number}} </td>
<td> {{row.line}} </td>
<td> {{row.cod_art}} </td>
<td> {{row.creation_date}} </td>
<td> {{row.deadline}} </td>
<td> {{row.qtt_ordered}} </td>
<td> {{row.qtt_delivered}} </td>
<td> {{row.ocor}} </td>
<td> <input type="text" id="qttField" ng-model-onblur ng-model="qtt" ui-keypress="{13:'setQtt($event)'}">
</tr>
The only field I don't get from the JSON query is the last one, an input field which is used to fill with a certain amount (Quantity).
What I need to do is: after I fill whatever fields I want, (e.g., the 1st, 4rd and last) I need to cycle through those fields, check which ones are filled and get the value from them.
I can't seem to get the value just from the model, since the model is the same for every field, that's why I'm currently using the 'Enter' button to update the value and send it to an array:
Simple Version:
$scope.arrayQtt = [];
var i = 0;
$scope.setQtt = function(evt){
$scope.arrayQtt[i] = evt.srcElement.value;
i++;
};
It is preferable to check all input fields with a 'Confirmation' button, after all fields are filled, since an user can edit a field the amount of times he wants before clicking the 'Confirmation' button.
Any help, advice or guidance is appreciated.
Thanks in advance!

Related

How to add keypress event to table td?

I have a table like this, for example:
<table id="tblUser">
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</table>
I want to detect the key code when a user presses any key within table cells.
Here is my current code, though it's not working for me:
$("#tblUser").keypress(function(e)
{
alert(e.keyCode);
});

HtmlAgilityPack reading table after specified table

I have similiar structure to this:
<table class="superclass">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
<table cellspacing="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
This is how I get the first table with class:
HtmlNode firstTable = document.DocumentNode.SelectSingleNode("//table[#class=\"superclass\"]");
Then I read the data. However I don't know how to get straight to the another table and read that data too. Any ideas?
I'd rather avoid counting which table it is and then using index to that table.
There is XPath following-sibling axis which allows you to get element following current context element at the same level :
HtmlNode firstTable = document.DocumentNode.SelectSingleNode("//table[#class=\"superclass\"]");
HtmlNode nextTable = firstTable.SelectSingleNode("following-sibling::table");
If you want to access multiple nodes, you can consider SelectNodes(xpath) method over SelectSingleNode(xpath) method.
I'll provide a sample code here for reference, it may not work towards your need.
var tables = htmlDocument.DocumentNode.SelectNodes("//table");
foreach (HtmlNode table in tables)
{
if (table.GetAttributeValue("class", "").Contains("superclass"))
{
//this is the table of class="superclass"
}
else
{
//this is the other table.
}
}

ASP How to get a value from HTML column

I have an ASP page which displays rows of data in an HTML table, after a query to an SQL database. The number of returned rows can vary. I want to add a function so that when i click on a button, I fire off a query to the SQL server database to update a column in that particular row. To do that i will use the primary key from my result set.
The part I am having difficulty with is getting the proper rows ID. What I have wrote so far returns the same ID every time regardless of which row i click on. Sample code below.
<table>
<tr>
<td class="bold" colspan="9"><%=vHeading%></td>
</tr>
<tr>
<td class="tablehead">Id</td>
<td class="tablehead">WhenPosted</td>
<td class="tablehead">WhenCreated</td>
<td class="tablehead">WhenUpdated</td>
<td class="tablehead">Source</td>
<td></td>
</tr>
<%
DO WHILE NOT stRs.eof
i = i + 1
%>
<tr>
<td id="pId<%=i%>" class="tablecell"><%=stRs.fields("Id")%></td>
<td class="tablecell"><%=stRs.fields("WhenPosted")%></td>
<td class="tablecell"><%=stRs.fields("WhenCreated")%></td>
<td class="tablecell"><%=stRs.fields("WhenUpdated")%></td>
<td class="tablecell"><%=stRs.fields("Source")%></td>
<td id=<%=i%>><input type="button" value="Post" onclick="post();" /></td>
</tr>
<%
stRs.MoveNext
LOOP
%>
</table>
<script text="text/javascript">
function post() {
var pId = document.getElementById("pId").innerHTML;
alert(pId);
}
</script>
So i loop through my result set creating rows. For examples-sake, row one will contain ID 1. Row 2 will have ID 2 etc.
If I click on my button which fires off the post method, the alert shows ID 1 every time, no matter the row i click on. I guessed its because i was originally assigning the same ID to the column for each row. I now use a counter variable and assign it to the ID which is creating unique ID's for the columns now, but I'm not sure how to call the function and use the correct ID. Any pointers are much appreciated!
You have to pass I to the function:
<input type="button" value="Post" onclick="post(<%=i%>);" />
then
<script text="text/javascript">
function post(i) {
var pId = document.getElementById("pId"+i).innerHTML;
alert(pId);
}
</script>

Code a table with no rows, but just one column

I have a HTML table. It has 3 columns. The first column is name. 2nd is School and 3rd is HomeAddress.
The table loads records from the DB, therefore the number of rows may vary from time to time. The 3rd Column (HomeAddress) should have no rows, while the other 2 columns (name and school) can have more rows. How should i model the HTML table to have the 3rd column with no rows ?
<table border="1">
<tr>
<th>
Name
</th>
<th>
School
</th>
<th>
Home Address
</th>
</tr>
#foreach (var i in Model.allPpl)
{
<tr>
<td>
#Html.DisplayFor(modelItem => i.name)
</td>
<td>
#Html.DisplayFor(modelItem => i.school)
</td>
<td>
// THERE SHOULDN'T BE ANY ROWS FOR THIS COLUMN, JUST ONE COLUMN FOR THE WHOLE TABLE
</td>
</tr>
}
Rowspan attribute is your only friend.
Try <td rowspan="rowcount"></td> for third column where rowcount is the no. of rows returned.
And modify your foreach loop as follows:
#bool flag=false;
#foreach (var i in Model.allPpl)
{
<tr>
<td>
#Html.DisplayFor(modelItem => i.name)
</td>
<td>
#Html.DisplayFor(modelItem => i.school)
</td>
if(!flag){
<td rowspan="#Model.allPpl.count">
// THERE SHOULDN'T BE ANY ROWS FOR THIS COLUMN, JUST ONE COLUMN FOR THE WHOLE TABLE
</td>
}flag=true;
</tr>
}
Note: I haven't tested this razor view code so please take care of compiler error if shows any.
I think these entries will help you:
http://www.w3schools.com/tags/att_td_rowspan.asp
http://www.w3schools.com/tags/att_td_colspan.asp

Finding an XPATH expression

For the following html:
<tr>
<td class="first">AUD</td>
<td> 0.00 </td>
<td> 1,305.01 </td>
<td> 1,305.01 </td>
<td> -65.20 </td>
<td> 0.00 </td>
<td> 0.00 </td>
<td> 1,239.81 </td>
<td class="fx-rate"> 0.98542 </td>
</tr>
I am trying to grab the value for the fx-rate, given the type of current. For example, the function would be something like get_fx_rate(currency). This is the XPATH expression I have so far, but it results in an empty element, []. What am I doing wrong here and what would be the correct expression?
"//td[#class='first']/text()[normalize-space()='AUD']/parent::td[#class='fx-rate']"
Use this:
//td[#class = 'first' and normalize-space() = 'AUD']/parent::tr/td[#class = 'fx-rate']
or clearer:
//tr[td[#class="first1" and normalize-space()="AUD"]]/td[#class="fx-rate"]
This is the way I managed to solve it, using partial xpaths:
### get all the elements via xpath
currencies = driver.find_elements_by_xpath("//td[#class='first']")
fx_rates = driver.find_elements_by_xpath("//td[#class='fx-rate']")
### build a list and zip it to get the k,v pairs
fx_values = [fx.text for fx in fx_rates if fx.text]
currency_text = [currency.text for currency in currencies if currency.text]
zip(currency_text,fx_values)[1:]