Have some issue with coding here. If there is no class assigned to the tag, how can I change the content using a external script? I would like to change the addition operator.
<tr>
<td><div id="number1">1</div></td>
<td><div>+</div></td>
<td><div id="number2">2</div></td>
<td><div>=</div></td>
<td><input type="text"></input></td>
<td><input type="button" value="Check"></input></td>
Thank you
<tr>
<td><div id="number1">1</div></td>
<td><div>+</div></td>
<td><div id="number2">2</div></td>
<td><div>= <span id="result"></></div></td>
<td><input type="text"></input></td>
<td><input type="button" value="Check"></input></td>
Jquery code :
$(function(){
$('#result').text('your text here ....');
});
I'm assuming you want to change the markup client-side using JS or similar - I've provided some examples below using jQuery.
The most robust solution would involve changing the markup so that there is some identifying feature of the DIV, so for example adding a class, e.g.
<td><div class="operator">+</div></td>
Once you have that, you can select the element and change its content with jQuery like this:
jQuery('.operator').html("added to");
If you can't change the markup then you need to find some other way of identifying the element.
Without access to your whole markup it's difficult to say reliably what the best way will be, but here's one example based on the markup you provided. It works by finding the second TD element within each TR element.
jQuery('tr td:nth-child(2)').html("added to");
Reference: http://api.jquery.com/nth-child-selector/
Use like
var elem = document.getElementById("number1"); /*this will get the div element for which you want to change the text. "number1" can be any ID*/
elem.innerHTML="123" /* this will update the text of that div*/
Related
I have an input type with content ">" , shown in below pic, clicking on which a row of a table expands.
I have used input type "checkbox" which when checked, I want to transform the ">" to rotate by 90 degrees. Below is the code,
input:checked + .tab-label::after {
transform: rotate(90deg);
}
However, the rotate doesnt happen even. I have tried multiple things but havent been able to figure out where I have made a mistake. Note that I cant use javascript as per my requiremnt. Please help.
here is the fiddle with entire code: https://jsfiddle.net/g8nmu09d/1/
The way the code is, it's impossible with just CSS. That's because the HTML structure is like this (simplified):
<table>
<tbody>
<tr>
<td>
<label for="row2">Label</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="row2">
</td>
</tr>
</tbody>
</table>
Following the rules of CSS, the very name C (Cascading) defines that CSS follows the rule from the parent element to the child. The most CSS allows is to select siblings, not parent elements.
This means, in practice, that your CSS won't work because the input:checked is in another td and as the CSS doesn't "go up" you won't be able to do it that way. You therefore need to change your HTML to one where the label and input:checked are at least at the same level.
Or you solve this with the JS change event...
How do I pick up <input>s belonging to a certain <form> using XPath? By belonging, I mean input where the .form attribute in JavaScript equals the specific form instance.
In the general case, I want an XPath that returns the same inputs this JavaScript returns:
Array.prototype.filter.call(document.getElementsByTagName("input"),
function(x) { return x.form == f1; })
Note: This does not mean is-a-child-of w.r.t. the DOM-tree!
For example, given the following (malformed) html:
<html>
<body>
<table>
<form name="foo">
<input name="bar"/>
<tr>
<td>
<input name="baz"/>
</td>
</tr>
</form>
</table>
</body>
</html>
bar.form == foo and baz.form == foo hold true, but the DOM-tree can be generated in a way that "//form[#name='foo']//input" contains neither bar nor baz.
e.g. Chrome/Firefox/IE will produce this DOM-tree for the above source:
<html>
<head/>
<body>
<input name="foo"/>
<table>
<form name="bar"></form>
<tbody>
<tr>
<td>
<input name="baz"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
P.S. An acceptable answer could simply state why this isn't possible.
Edit: Clarified the meaning of the bottom example. Updated the example to show why simply traversing the DOM-tree will not work.
Your input is invalid HTML. Form inputs have to be inside a <form/> element, otherwise it is not clear how they correlate. For example, in the following HTML snippet, how should a browser or any HTML parser now to which form the input belongs:
<table>
<form name="foo"></form>
<form name="foo2"></form>
<tr>
<td><input name="bar" /></td>
</tr>
</table>
That being said, many browser are very relaxed and basically allow HTML designers to not use any standard. So they could use metric and say each input belongs to the last preceding form element. Maybe their heuristic is more elaborate, so you might not get each and every corner-case with this. However, the following XPath should work at least for your two examples:
//input[(preceding::form)[last()]/#name="foo"]
This way, you get all input elements, which had as last form element the one with the specified name, in this case foo.
With the examples you posted, I don't see this possible. You would do this with an event based (SAX) parser, where you keep the name of the "last seen form name" and allocate each input element to that form.
Of course, especially for the second example, this isn't how the browser sees it.
Since I can't use comments yet:
#dirkk: preceding won't work, because the axis is "excluding any ancestors". So for the valid HTML case, it actually doesn't work, as a form is considered an ancestor. It's a good idea though, maybe preceding|ancestor will work.
The visible property of html table does not work.
Why do they have that property if its defective? I had to use style="visibility:hidden" in order to hide a table.
Please explain why. I am very curious
Here's the code I'm using. The intention is to hide the table as a whole but its not hiding the table or the controls inside it
<table visible="false">
<tr>
<td >
<label>Pick the color for action needed and paste it on textbox</label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Apply color" />
</td>
</tr>
</table>
Use display: none instead. Besides, this is probably what you need, because this also truncates the page by removing the space the table occupies, whereas visibility: hidden leaves the white space left by the table.
You probably are looking for style="display:none;" which will totally hide your element, whereas the visibility hides it but keeps the screen place it would take...
UPDATE: visible is not a valid property in HTML, that's why it didn't work... See my suggestion above to correctly hide your html element
If you want use it, use runat="server" for that table. After that use tablename.visible=False in server side code.
For a similar post a long time ago there seems to be issues with making table visibility hidden.
You have two options, one is to use the display:none attribute.
Or two wrap the table in a div and make the div hidden.
<div id="wrapper" style="visibility:hidden">
<table>
<tr>
<td>
Content
</td>
</tr>
</table>
</div>
visibility:hidden is the proper syntax, but another way to 'hide' the table is with display:none or dynamically with JQuery:
$('#myTable').hide()
For the best practice - use style="display:"
it will work every where..
Who "they"? I don't think there's a visible attribute in html.
The reason that visible="false" does not work is because HTML is defined as a standard by a consortium group. The standard for the Table element does not have a visibility property defined.
You can see all the valid properties for a table by going to the standards web page for tables.
That page can be a bit hard to read, so here is a link to another page that makes it easier to read.
Is there any way to make clickable <td> or <tr> tags?
<td>bar</td>
<td onclick="window.location = 'index.html';">cell content</td>
index.html above can be any URL or internal page link. Note: the mouse pointer does not turn into a pointing hand when you mouse over the cell using this javascript method, but clicking on the cell does take you to the URL.
To turn non-link tags into links, use #Lie Ryan's answer and put an a into the element.
To be able to link to an element:
Use an a
Link to the element
and a named point:
<td id="idOfTheElement">contents</td>
<td><a name="foo"/>bar</td>
<td>s can have a JavaScript onclick event.
Other than that, putting an <a> into the table cell, and giving it a fixed width to fill the table (you need to make it display: block for that) is the most reliable way.
If I understood correctly what you mean:
<td id="yourcell">Just a useless cell</td>
...
link
Reference
Here is the correct way to make it using jquery.
$(document).ready(function() {
$('#tableid tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
If you want make all the cells are clickable you need to mention "td" in click function.
I would like to be able to place an empty tag anywhere in my document as a marker that can be addressed by jQuery. However, it is important that the XHTML still validates.
To give you a bit of background as to what I'm doing: I've compared the current and previous versions of a particular document and I'm placing markers in the html where the differences are. I'm then intending to use jQuery to highlight the parent block-level elements when highlightchanges=true is in the URL's query string.
At the moment I'm using <span> tags but it occurred to me that this sort of thing wouldn't validate:
<table>
<tr>
<td>Old row</td>
</tr>
<span class="diff"></span><tr>
<td>Just added</td>
</tr>
</table>
So is there a tag I can use anywhere? Meta tag maybe?
Thanks for your help!
Iain
Edit: On the advice of codeka, I may look for a better difference engine and I may have found one that is attuned to finding differences in XHTML: http://www.rohland.co.za/index.php/2009/10/31/csharp-html-diff-algorithm/
You can use HTML comments and this plugin (or this one).
Can you not just modify the class of elements that have changed?
<p class="diff other-class">Something changed</p>
<table>
<tr>
<td>Old row</td>
</tr>
<tr class="diff">
<td>Just added</td>
</tr>
</table>