I want to be able to click on a table data, once I've clicked it, it should then store what is inside that table data into a variable that I can use.
ex. TD="1234" OnClick AX="1234"
display=AX
conduct search=AX
etc
still a beginner so not sure how to make certain tags/code work with each other
<table id="detail_table" class="detail">
<thead>
<tr>
<th>ID</th>
<th colspan="2">Name</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row101" title="Click to expand/collapse"
style="cursor: pointer;">
<td>101</td>
<td colspan="2">File Management Tool</td>
</tr>
<tr class="child-row101" style="display: none;">
<td> </td>
<td>New File Tool</td>
</tr>
<tr class="child-row101" style="display: none;">
<td> </td>
<td>Transfer Report</td>
</tr>
From the sample code, what I want to achieve is if I click on one of the child tds (Ex: File Management Tool) I want that info stored in a variable (AX= File Management Tool), which I can then pass on to another form to conduct a search.
Is this doable?
Many thanks in advance for any answers.
Related
EDIT: To the person who tagged this as having nothing to do with ADA. This question has everything to do with ADA. I have tons of websites with tables formatted like that which I am trying to figure out how to make them understandable to someone using a screen reader.
Hello I am trying to figure out a way to make a table which has subheadings / separator rows to announce the proper headings when being read by a screen reader.
The first table works as I would like, announcing the rowgroup's TH and then the column heading. However the second table doesn't announce as I was hoping. For example, Jill announces "Field Techs, Name, Jill" Instead of "Office, Name, Jill" as I had expected.
I've tried scope="col" and scope="colgroup" but neither helped. Is this even possible? or just a badly structured table?
Thank you for reading and any help/advice you may offer!
table thead, table th { background:#d3d3d3; }
table { margin-bottom:40px; }
<!-- This table's headings seem to work properly -->
<table width="100%" cellspacing="0" cellpadding="4" >
<thead>
<tr>
<td> </td>
<th id="name_col" scope="col" width="50%">Name</th>
<th id="position_col" scope="col" width="50%">Position</th>
</tr>
</thead>
<tbody>
<tr>
<th id="office_row" scope="rowgroup" rowspan="2">Office</th>
<td headers="office_row name_col">Jill</td>
<td headers="office_row position_col">Office Manager</td>
</tr>
<tr>
<td headers="office_row name_col">Robert</td>
<td headers="office_row position_col">Project Manager</td>
</tr>
<tr>
<th id="field_row" scope="rowgroup" rowspan="2">Field Techs</th>
<td headers="field_row name_col">Jason</td>
<td headers="field_row position_col">Tech</td>
</tr>
<tr>
<td headers="field_row name_col">Mike</td>
<td headers="field_row position_col">Tech</td>
</tr>
</tbody>
</table>
<!-- This table's headings don't announce correctly. Jill announces "Field Techs, Name, Jill"-->
<table width="100%" cellspacing="0" cellpadding="4" >
<thead>
<tr>
<th id="name_col" scope="col" width="50%">Name</th>
<th id="position_col" scope="col" width="50%">Position</th>
</tr>
<tr>
<th id="office_group" colspan="2">Office</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="office_group name_col">Jill</td>
<td headers="office_group position_col">Office Manager</td>
</tr>
<tr>
<td headers="office_group name_col">Robert</td>
<td headers="office_group position_col">Project Manager</td>
</tr>
</tbody>
<thead>
<tr>
<th id="field_group" colspan="2">Field Techs</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="field_group name_col">Jason</td>
<td headers="field_group position_col">Tech</td>
</tr>
<tr>
<td headers="field_group name_col">Mike</td>
<td headers="field_group position_col">Tech</td>
</tr>
</tbody>
</table>
table can only have zero or one thead element (see documentation).
Permitted contents : An optional caption element, followed by zero or more colgroup elements, followed by an optional thead element
By having multiple thead elements only the last one is considered by your browser and your screenreader. You can use ARIA attributes and roles to handle multiple separated heading lines (using for instance aria-labelledby attribute to specify the heading).
One example from WCAG:
ARIA9: Using aria-labelledby to concatenate a label from several text nodes
You are using both the scope method and header/id's method in one table, which will create problems. Also, as others have pointed out, you're using multiple <th> and <tbody> elements, which isn't good either.
I've prepared some code samples here on how to correctly code this table using both the scope method and header/id's method:
https://jsfiddle.net/oody1b8x/
It's worth noting that <th> and <tbody> are not accessibility-related elements, even though they appear to be. These are essentially only used when printing. It lets the printer know that the header rows can be repeated on the next page if the table requires pagination.
Also -- don't use ARIA for this purpose; it will only create more problems. The native HTML semantics are perfectly capable of communicating how this data is structured.
I´m generating a pdf to print the bill, but in Argentina we have an easy but tricky design which I cannot figure out how to do it! I need to make it with html tables.
It is very simple, but I can´t do it and it´s driving me crazy!
I appreciate all the help.
HERE is my code:
<table border= "1" width="50%">
<tr>
<td > Merge 1 </td>
<td colspan="2" align="center">A</td>
<td> Merge 2 </td>
</tr>
<tr>
<td colspan="2">Merge 1</td>
<td colspan="2">Merge 2</td>
</tr>
</table>
Have you considered using PDF Forms? Then you can design the pdf as you want and just fill in the data you need at runtime
I have an HTML5 page that I want to display data in using knockout binding, I can get the first field to display data, there after I do not see anything. If I remove the first field, the second field displays correctly, if I put the first field back it is the only field to display. If I put a fixed value in it displays correctly. I have confirmed that there are values wherever I try to bind and that binding is correct (e.g. the second field binds correctly if the first field is not present).
Here is my HTML, please tell me what is the problem (I'm an HTML noob):
<table>
<thead>
<tr>
<td></td>
<td>debit amount</td>
<td>credit amount</td>
<td>count</td>
</tr>
</thead>
<tbody>
<tr>
<td>work</td>
<td data-bind="text: accountBalance().WorkDebitAmount"/>
<td data-bind="text: accountBalance().WorkCreditAmount"/>
<td data-bind="text: accountBalance().WorkCount"/>
</tr>
<tr>
<td>open</td>
<td data-bind="text: accountBalance().OpenDebitAmount"/>
<td data-bind="text: accountBalance().OpenCreditAmount"/>
<td data-bind="text: accountBalance().OpenCount"/>
</tr>
<tr>
<td>history</td>
<td data-bind="text: accountBalance().HistoryDebitAmount"/>
<td data-bind="text: accountBalance().HistoryCreditAmount"/>
<td data-bind="text: accountBalance().HistoryCount"/>
</tr>
</tbody>
</table>
You shouldn't expect the table cell element to be self-closing.
<td data-bind="text: accountBalance().HistoryDebitAmount"></td>
Now, since you appear 'new' to the knockout world, I would also put a 'with' binding in your tbody:
<tbody data-bind="with: accountBalance">...</tbody>
Then, in your table cell declarations you no longer need to repeat the bound element :
<td data-bind="text: HistoryDebitAmount"></td>
One further step, I wouldn't do a text binding directly on the table cell, but insert a label or some other element within the table cell:
<td><label data-bind="text: HistoryDebitAmount"></label></td>
All in all, the self-closing issue may resolve everything.
I have the following html page. I want to extract data only within the 1st table tag in C#. the html page code is:
<table cellpadding=2 cellspacing=0 border=0 width=100%>
<tbody>
<tr>
<td align=right><b>11/09/2013 at 09:48</b></td>
</tr>
</tbody>
</table>
<center>
<table border="1" bordercolor="silver" cellpadding="2" cellspacing="0" width="100%">
<thead>
<tr>
<th width=100>ETA</th>
<th width=100>Ship Name</th>
<th width=80>From port</th>
<th width=80>To berth</th>
<th width=130>Agent</th>
</tr>
</thead>
<tbody>
<tr><td>11/09/2013 at 09:00 </td>
<td>SONANGOL KALANDULA </td>
<td>Cabinda </td>
<td>Valero 6 </td>
<td>Graypen </td>
</tr>
</tbody>
</table>
To be more specific I want to extract only the row having date 11/09/2013 at 09:48 the below mentioned code is under the first of tag I am using regex
"<table[^>]*>([^<]*(?:(?!</table)<[^<]*)*)[</table>]*"
but with this I am getting whole of the page source that is I am getting the data between all the table tags but I want only text between first table tag.
Can anyone tell me regular expression with which I can only extract this particular portion from the whole html page?
When trying out your version here, it seems to work to me on the input you specified, though [</table>]* should really be just </table> ([</table>]* means any number of characters in the set: <,/,t,a,b,l,e,>)
This seems like it would bear simplification, though. This should also work:
<table[^>]*>.*?</table>
All bets are off if you have nested tables, of course.
I want to make a table of orders, for each row there's an arrow that show a bill details related to each order and hide when I click again on the button.
How can I make the structure of the table?
I make like this
<table id="customerTable">
<thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
</tr>
</thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td>show details</td>
</tr>
//also loop here as the number of bills
<tr>
<td>bill order/td>
<td>product</td>
<td>price</td>
</tr>
I don't think like this structure is correct, and making div inside a table doesn't work, any suggestion please?
Possible structure:
<table id="customerTable">
<thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td></td>
</tr>
</thead>
<tbody>
<tr class="master">
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td>
show details
</td>
</tr>
<tr class="detail">
<td colspan=5>
<!-- new <table> with your details of this row -->
</td>
</tr>
<!-- ... more rows ... --->
</tbody>
</table>
Example: http://jsfiddle.net/J7szf/
Example 2: http://jsfiddle.net/J7szf/1/
You can probably use a popup near the "Show Details" Link
Example : http://jsfiddle.net/vdcUA/93/
If you want the content to be displayed in the table itself , provide here some idea on how u want the content displayed
In your example, you have an extra unneeded <tr> before your loop. You should have a standard table structure but hide / show the details depending on a click.
You'd better use:
styling with css and classes the standard row and the details
using js to hide / show rows
Actually, you could use jquery plugins to do this kind of stuff. See this example of datatables grouping rows
Jqgrid can also make some row grouping
[EDIT] The easiest way to define your HTML structure is to get inspired from the HTML in these jquery plugin examples