<table border='1' id='output'>
<tr>
<td>
</td>
</tr>
</table>
my javascript code
document.getElementById("output").childNodes[0].childNodes[0].nodeValue = ajaxRequest.responseText;
Doesnt work please help
Using JQuery u can do it easly as given below:
$(document).ready(function(){
$("#output tr td").text("JQUERY HELP");
});
or if u want to continue with javascript u can refer other posted answers.
CLICK HERE TO SEE THE DEMO
document.getElementById("output").children[0].children[0].children[0].innerHTML;
You have two things wrong:
That's not a valid <table>.
Tables have to have a <tbody> tag. Which is probably getting added by the browser, which means you need to go one level deeper to access the <td> element.
The second thing, nodeValue will always be null for a non-text node, which is what a <td> is. Instead use the innerHTML property to alter the element's text.
After correcting those two things, your code should look like this:
document.getElementById("output").childNodes[0].childNodes[0].childNodes[0].innerHTML = ajaxRequest.responseText;
<table border='1' id='output'>
<tr>
<td></td>
</tr>
</table>
$(function(){
$('#output td').append("blaa");
});
Check this
Hope this helps.
Alex is right, there is a tbody TAg.
try below one:
document.getElementById("output").getElementsByTagName("td")[0].innerHTML="test1"
Related
I tryıng to use jQuery selectors but it doesn't work. I use Cypress so sometimes I need to use jQuery selectors to find elements by text or some unique generated numbers. (instead of cy.contains() i.e. sometimes I can need to brake recursions etc.)
Can anyone help me please?
I tried so many selectors, one of those selectors is:
$(tbody:has(tr.dx-row.dx-data-row.dx-row-lines.dx-row-focused.dx-cell-focus-disabled) tr td:contains(`10304`))
the queries that I showed normally work well. But that question that I asked doesn't work suspiciously. I thought about maybe the console doesn't support queries but when I use :has command console shows me without a problem then why :contains doesn't work? Why I can't select elements with text that I asked as a question?
I think your selectors are very complicated, try to simplify them by maybe just select the <td>, that contains that text like in my example below.
For demonstration purposes, i show just the cell text (.text()) - but it can be whatever you want.
$(document).ready(() => {
const $table = $('table');
console.log($table.find('td:contains(10304)').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr class="dx-row dx-data-row dx-row-lines andsoon">
<td class="dx-command-select">UNASSIGNED</td>
<td class="dx-col-1">10304</td>
<td class="dx-col-2">YAYDIN</td>
</tr>
</tbody>
</table>
I have some HTML of the form:-
<table>
<tr>
<td>Text for input 1<br/><div>Lots of textual data</div><input id="field1" class="mandatory"/></td>
<td>Text for input 2<br/><input id="field2" class="mandatory"/></td?
<td>Text for input 3<br/><input id="field3"/></td>
</tr>
</table>
(but with many more fields & rows).
I'm iterating through the mandatory class and, where the input field is empty, I want to display the text preceding the <br/> but not anything else.
Using:-
$(this).parent().text();
only works up to a point because it also displays the text in the <div>
Is there a way that I can limit the text to just that before the <br/>?
I think what you are looking for is .contents()
$(this).parent().contents().eq(0).text();
Demo: Fiddle
You may update your HTML markup to keep your message in a span tag with a special css class which you can use to make your jQuery selection more easier.
<table>
<tr>
<td><span class="msg">Text for input 1</span><br/>
<div>Lots of textual data</div><input id="field1" class="mandatory"/>
</td>
</tr>
</table>
and now use the closest method to get the parent td and use the find method to get the span
$(".mandatory").each(function(index,item){
var msg=$(this).closest("td").find("span.msg").html();
//do something with msg now
});
Here is a working sample http://jsbin.com/oDUPujOl/1/
Time for some plain JS, as jQuery doesn't really play well with textnodes:
var text = this.parentNode.firstChild.nodeValue.trim();
FIDDLE
You can clone your target TD and remove the elements which are with unnecessary text. Now you easily fetch the required text from that TD. For reference please read this : .clone()
Try this one,
$("#field1").keyup(function(){
var xClone = $(this).parent().clone();
xClone.find('div').remove();
alert((xClone).text());
});
DEMO
I created a table contain the colspan and rowspan. Then I would like to get or read these colspan and rowspan value. I'm doing this because I want to use it for xml generation. I need this value. I play around with this code to test:
<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
document.getElementById("myHeader1").colSpan="2";
}
function displayColSpan()
{
var te;
document.getElementById("myHeader1").colSpan=te;
alert(te);
}
</script>
</head>
<body>
<table border="1">
<tr>
<th id="myHeader1">Month</th>
<th id="myHeader2">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100.00</td>
</tr>
<tr>
<td>February</td>
<td>$10.00</td>
</tr>
<tr>
<td>March</td>
<td>$80.00</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Change colSpan for the first cell</button>
<button type="button" onclick="displayColSpan()">test</button>
</body>
</html>
Could you help me? Thanks!
There's a bit of confusion with your code.
This:
document.getElementById("myHeader1").colSpan=te;
Changes the colspan value of myHeader1 to var te, which is undefined. Instead you should do:
te = document.getElementById("myHeader1").colSpan
now te is the colspan value of myHeader1.
If you want to get the value, that is 'month':
te = document.getElementById("myHeader1").innerHTML
Now te has the value of 'month'!
Hope this helps!
The code you're using was copied from this site: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_th_colspan Isn't it?
Good, then you must have noticed that what they are doing there? They are simply changing the properties of the columns and their span, what we can say in css might be padding.
You want to get the value of the span? I never tried javascript for this, I have always used CSS.
But still, go through this page: Calculate and set colspan value dynamically
He showed a well developed code, you can also try out getting the values from element such as:
var val=document.getElementById("idofel").style.backgroundColor;
To get the background-color, you can try such other values for this table too. Obviously not background-color, but the necessary ones. And then write them in XML!
So I have the following HTML
<div class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</div>
and the following JS:
console.log($('#query_tmpl').html());
For some reason this only logs the 'a' tag. (Ex: http://jsfiddle.net/L8RQq/ )
Why does this happen and how do I get around it so that I can properly pick up the tr/td? I'm using jQuery 1.9.2 if that makes any difference.
Update:
Yes, the markup is 'bad html', but the whole point of this question is how to get around that. Using the HTML present and without altering it, how can I grab the contents even though it's 'bad'?
You don't have table tags around your tr. Try this:
<div class="tmpl" id="query_tmpl">
<table>
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
</div>
This will log the div's contents properly.
the reason it wasn't logging, is because the browser sees some invalid tr and td tags, and removes those, because they can only be in a table, leaving you with only the a.
If you can't change the markup, tell the person / company that wrote that markup to fix it. It's invalid HTML.
Make it like this
<table class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
Then it will surely work correctly
If you want to pick up tr's or td's you can use css manipulation functions such as children([selector]) where selector is eventually a class
I guess I am spoiled with JavaScript. If you want to change something about the parent, you can code something like parentNode.style.etc.
<TABLE id="hasID">
<TBODY>
<TR>
<TD>
<IMG id="hasID2" src="somePicture.png">
<IMG id="hasID3" src="someOtherPicture.png">
</TD>
</tr>
<tr>
<td>other stuff</td>
</tr>
</tbody>
</table>
As you can see from my code table has an id, and the img tags have ids. What I would like to do is add a stype class to the first TD, so that all the images are aligned to the left or middle, that kind of thing.
However, here is a tricky part, I don't want to user JavaScript, because it looks to slow. Everything starts out on the right, and then jump to the center, after everything is loaded.
Also, here is a second tricky part. I can't change add a class to the TD, because it generated by JSF.
So my main question is can I do this with CSS.
UPDATE:
I don't really need to reference a parent. Referencing a child will also work for me.
You can't select a parent via CSS. It was proposed as a feature but it's not even close to implementation.
I will suggest that you move any javascript you have to just after the content above, which means that it will run as soon as that part of the section is rendered, thus removing any delay.
<TABLE id="hasID">
<TBODY>
<TR>
<TD>
<IMG id="hasID2" src="somePicture.png">
<IMG id="hasID3" src="someOtherPicture.png">
</TD>
</tr>
<tr>
<td>other stuff</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var img = document.getElementById("hasID2");
img.parentNode.style.textAlign = "right";
</script>
Inline Javascript is OK to use in these scenarios.
Sorry no way to select parent in css.
Is there a CSS parent selector?
Not sure if this will help, but I'll mention that you can add classes using JSF with styleClass="", depending on how you are generating the table. There is also a columnClass="" if you are putting these in a datatable.