How to add keypress event to table td? - html

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);
});

Related

How to reuse same button with same value but different ID HTML, ReactJS

I'm doing a laundry system where the same timeslots repeat each day, i would like the timeslots to have different ID's to cross reference with the database, is it possible to do this without declaring a new button with new ID each time?
return (
<table id="table">
<thead>{renderTableHeader()}</thead>
<tbody>
<tr>
<td>
<button id="1">07:00-08:30</button>
</td>
<td>
<button id="2">07:00-08:30</button> // this need to be repeated 7 times
</td>
<td>
<button id="3">07:00-08:30</button>
</td>
</tr>
<tr>
<td>
<button id='8'>08:30-10:00</button> //new row whith same functionality
</td>
</tr>
</tbody>
</table>
);

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.
}
}

Referencing Table elements

Say for example I have a table layout like this
<table>
<tr>
<td id="AEimage1">
row 1 cell 1
</td>
<td id="AEimage2">
row 1 cell 2
</td>
</tr>
<tr>
<td id="setup1">
row 2 cell 1
</td>
<td>
row 2 cell 2
</td>
<td>
row 2 cell 3
</td>
<td>
row 2 cell 4
</td>
</tr>
</table>
How would I call to an individual row and cell in CSS? So say I wanted to call to [Row2, cell 1], how would I do this? I've tried stacking the elements in CSS like the following:
#LinkCSS table tr tr td {
But this has not worked for me. What am I doing wrong?
(As a note I realize I can give the cells ID's, and call to them this way. But this is not working for me).
You can use the :nth-child selector and the :first-child selector like this:
table tr:nth-child(2) td:first-child {
color:red;
}
Demo.

Cycle through input fields

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!

To show arraylist data in specific format

I am getting request attribute on a JSP page like = ArrayList arr= [a,b,c[e,f,g[j,k,l]]]. The list can be long. How should I show it in such a way a,b,c is parent of e,f,g is parent of j,k,l?
I want something like this or better
<tr onclick=showchild()>
<td> a </td> <td> b </td> <td> c </td>
</tr>
When I click on above tr its child i.e, below tr should be shown.
< tr onclick=showchild()>
<td> e </td <td> f </td> <td> g </td>
</tr>