Does anyone know how I can stop only some sets of numbers from being linked eg numéros - but also let the iphone link the real phone numbers?
<h2>Table</h2>
<table class="table table-sm table-striped table-hover">
<caption class="sr-only">Résultat(s) de recherche</caption>
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Numéro</th>
</tr>
</thead>
<tbody>
<tr tabindex="0" role="button" onclick="window.location='http://www.google.com'">
<td>123 Plomberie</td>
<td class="no_underline">25458-5172-53</td>
</tr>
</tbody>
</table>
This solution worked for all type of number, but how let the iphone link the real phone numbers : https://webmasters.stackexchange.com/questions/4459/keep-iphone-browser-from-turning-numbers-into-links
Not a solution but temporary workaround, its worked for all number. Add this in header of html
<meta name = "format-detection" content = "telephone=no">
Related
I have a web app, front end has a bootstrap table, whose data rendered from Django rest framework.
As the data is rendered using data-field, it only has table header, does not have table column.
I want to make some some column editable but some not, but but failed to do so. The contenteditable='true'/'false' flag does not function on a column level.
How could I make some column editable but some not？
<table contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
id="bk-table"
data-toggle="table"
data-toolbar="#toolbar"
data-cookie="true"
data-cookie-id-table="materialId"
data-show-columns="true"
data-show-refresh="true"
data-show-fullscreen="true"
data-height="650"
data-click-to-select="true"
data-id-field="id"
data-show-footer="true"
data-url="/api/materials/"
data-query-params="queryParams"
data-remember-order="true"
data-pagination="true"
data-side-pagination="client"
data-total-field="count"
data-data-field="results">
<thead class="thead-dark" >
<tr contenteditable='true'>
<th data-field="state" data-checkbox="true"></th>
<th data-field="type">Course Type</th>
</tr>
</thead>
</table>
use bootstrap table plugin "x-editable" to make a column editable or non-editable use
data-editable="true" data-editable="false" respectively on <tr>
for example
<table id="my_table_id"
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-4" data-editable="true">Name</th>
<th class="col-md-7" data-editable="false">Description</th>
</tr>
</thead>
</table>
I'm working on optimizing a website for visually impaired. I have a table on the page in the following format -
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
Currently the screen reader is announcing "row 1 col 1 number" but the expectation is that it should announce "row 1 col 1 number column header" when its a element. How can I configure it? Setting role="columnheader" is not working.
It is scope you are looking for to associate columns and rows.
scope="col" will associate a table header as a column header.
You can also associate a row header if you wish with scope="row"
<table>
<caption>My table caption - don't forget this so people know what a table is for / about</caption>
<thead>
<tr>
<th scope="col">Number</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Mike</td>
<td>Simmons</td>
</tr>
</tbody>
</table>
See https://www.w3.org/TR/WCAG20-TECHS/H63.html for more info on this technique.
p.s. don't forget to add a <caption> to your table!
I am using table-striped style provided by Bootstrap in a table. And I am using angular js to populate the data. It is not showing the table in stripe format. Can someone help me in recognizing the error that I am making?
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody ng-repeat="e in data.events">
<tr>
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
I think you meant to put the ng-repeat on the tr element instead of the body. You're repeating the body instead of rows.
Bootstrap alternates the colours on the rows, and since you are creating a new table body with 1 row each, it's only going to show one color.
I believe your issue is the placement of the repeat directive. If you move it to your tr element, it should be fine. As is, it is creating a new tbody element for each item in your events array. Since table-striped alternates the background color of even rows, and each tbody contains only 1 row, you aren't seeing that style applied.
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in data.events">
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in data.events">
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
This should work fine, but you need to repeat the table rows <tr>, not the table body <tbody>.
I am new to Powershell, and I suck at html.
There's a page with a table, and each cell has a ahref link, the value of the link is dynamic, but the link which I want to automate-clicking is always in the first cell.
I know there's cellindex in html/JS, is it usable in PS?
For example, let's say I have this table on a website.
<table>
<tr>
<td>
<a href="http://example1.com">
<div style="height:100%;width:100%">
hello world1
</div>
</a>
</td>
</tr>
<tr>
<td>
<a href="http://example2.com">
<div style="height:100%;width:100%">
hello world2
</div>
</a>
</td>
</tr>
<tr>
<td>
<a href="http://example3.com">
<div style="height:100%;width:100%">
hello world3
</div>
</a>
</td>
</tr>
</table>
And I want to make powershell to always click on the first link, the link inside is dynamic though.
Any ideas? Hints?
The result of Invoke-WebRequest returns a property named Links that is a collection of all the hyperlinks on a web page.
For example:
$Web = Invoke-webrequest -Uri 'http://wragg.io' $Web.Links | Select innertext,href
Returns:
innerText href
--------- ----
Mark Wragg http://wragg.io
Twitter https://twitter.com/markwragg
Github https://github.com/markwragg
LinkedIn https://uk.linkedin.com/in/mwragg
If the link you want to capture is always the first in this list you could get it by doing:
$Web.Links[0].href
If it's the second [1], third [2] etc. etc.
I don't think there is an equivalent of "cellindex", although there is a property named AllElements that you can access via an array index. E.g if you wanted the second element on the page you could for example do:
$Web.AllElements[2]
If you need to get to a specific table in the page and then access links inside of that table you'd probably need to iterate through the AllElements property until you reached the table you wanted. For example if you know the links were in the third table on the page:
$Links = #()
$TableCount = 0
$Web.AllElements | ForEach-Object {
If ($_.tagname -eq 'table'){ $TableCount++ }
If ($TableCount -eq 3){
If ($_.tagname -eq 'a') {
$Links += $_
}
}
}
$Links | Select -First 1
Ok, the Invoke-webrequest method is working with mark's link but with my page; but I noticed a pattern that may can be used:
I noticed the the following:
<table id="row" class="simple">
<thead>
<tr>
<th></th>
<th class="centerjustify">File Name</th>
<th class="centerjustify">File ID</th>
<th class="datetime">Creation Date</th>
<th class="datetime">Upload Date</th>
<th class="centerjustify">Processing Status</th>
<th class="centerjustify">Exceptions</th>
<th class="centerjustify">Unprocessed Count</th>
<th class="centerjustify">Discarded Count</th>
<th class="centerjustify">Rejected Count</th>
<th class="centerjustify">Void Count</th>
<th class="centerjustify">PO Total Count</th>
<th class="centerjustify">PO Total Amount</th>
<th class="centerjustify">CM Total Count</th>
<th class="centerjustify">CM Total Amount</th>
<th class="centerjustify">PO Processed Count</th>
<th class="centerjustify">PO Processed Amount</th>
<th class="centerjustify">CM Processed Count</th>
<th class="centerjustify">CM Processed Amount</th>
<th class="centerjustify">Counts At Upload</th></tr></thead>
<tbody>
<tr class="odd">
<td><input type="radio" disabled="disabled" name="checkedValue" value="12047" /></td>
<td class="leftjustify textColorBlack">
520170123000000_520170123000000_20170327_01.txt</td>
<td class="centerjustify textColorBlack">1</td>
<td class="datetime textColorBlack">Mar 27, 2017 0:00</td>
<td class="datetime textColorBlack">Mar 27, 2017 10:33:24 PM +03:00</td>
<td class="centerjustify textColorBlack">
The fId part in "loadConfirmationDetails.htm?fId=12047" is dynamic; and it's the last part of the next page;
For example: "https://aaa.xxxxxxx.com/aaa/community/loadConfirmationDetails.htm?fId=12047
And table's ID is unique, called "row" - I wonder if I can use a completely another way; other than invoking the webpage, by auto-copying this id info from its source html and concatenate it with the main link?
I am really out of ideas beyond that.
Here i'm new for AngularJs can you please helpme how to show records Like 1-10 out of 100 if I click on next paging 11-20 out of 100.soo o to countinuous
<b style="color:red">Items Search is : {{TotalRec.length}}</b>
<b> Toal Records Available {{GetDb.length}}</b>
<table class="table table-hover table-bordered">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr dir-paginate="ee in GetDb|orderBy:sortKey:reverse|filter:search|itemsPerPage:2|filter:query as TotalRec">
<td>{{ee.id}}</td>
<td>{{ee.Name}}</td>
</tr>
</table>
Have a look at this example :
https://github.com/rahil471/search-sort-and-pagination-angularjs