I am trying to select an element on a table which is on a webpage. The inner text which is on the table is a name of a professor. I am using this line of code to grab the elements.
var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");
And yes it works with the tables on the main webpage and grabs the elements I need. However when i try going on a different course page to grab the elements of another table it does not work even though all the tables have the same format. Its as if the tables are invisible to the code and only grabs the ones on the main webpage.
However every so know and then it grabs all the elements I need on a different course page but on very rare occasions.
The last line on the code below is the element I am trying to grab.
<table class="section-detail-grid table-bordered-wrap">
<thead>
</thead>
<tbody>
<tr data-id="80886" data-index="0" class="section-item section
first linked-section">
<td class="persist row-label">
COP
</td>
<td class=" row-label">
3514
</td>
<td class="persist row-label">
001
</td>
<td class="persist row-label">
Class Lecture
</td>
<td class=" row-label">
<div>Wang, Jing</div>
Someone mentioned that it may be an ajax driven site and thats why its not grabbing all the elements all the time. Ive even tried getting the xpath of that element but it is still not being found. Why is this element invisible to my code?
Related
after reading a lot of posts here, I've come to the conclusion that textContent is faster than innerHTML and outerHTML; but what happens when I have a lot of data that needs to be replaced?
I have a table with dynamic second columns such as follows. Keep in mind a JS function will show/hide metric or imperial <span> when clicked.
When a new variant is selected, data in the second cells will change.
<div class="spec-table" id="SpecTable">
<table class="table">
<tr>
<td>dimension_1_title</td>
<td><span class="spec-table_metric">dimension_1_metric</span><span class="spec-table_imperial">dimension_1_imperial</span></td>
</tr>
<tr>
<td>dimension_2_title</td>
<td><span class="spec-table_metric">dimension_2_metric</span><span class="spec-table_imperial">dimension_2_imperial</span></td>
</tr>
<tr>
<td>Other information</td>
<td><span class="spec-table_metric">Other information metric</span><span class="spec-table_imperial">Other information imperial</span></td>
</tr>
</table>
</div>
Would it make sense if I put the entirety of my HTML table into JS variables for each variant and use getElementById(#SpecTable).innerHTML to replace it or use 6 functions to change each <span> individually by using getElementById(#IDs for Spans).textContent?
I'm confused as I may have 5 variants, which means 30 JS variables to collect and match when needed, whereas only 5 JS variables that contain the whole table.
In addition, is it better or worst if I get rid of the <div> and use outerHTML to change the table?
I'm a beginner at JS, and if you have other recommendations, I appreciate your input.
I'm new in JavaScript. I have table that can have one or more rows.
The first thing I do is verify how many rows I want to insert and use the following command to fill the table .
$('#optionsTable').html('<tr id="table"><td width="90%" colspan="2" class="cellheader".......></tr>)
When I have more than one row, I'm trying to use the innerHTML to get the row that was inserted before because I need to modify it. I mean if I have more than one row I don't need to have the second <td> tag (or it can be there but without the <a href></a> tag) and I need to have the text "Principal" in bold after the text "Tomorrow" in first <td>.
The innerHTML that I'm getting from the first row is the following:
<tr id="documento1">
<td width="90%">Tomorrow</td>
<td width="10%" align="center"><Remove></td>
</tr>
I've already check this, but it doesn't solve my problem.
Does anyone can help me finding a solution to change the innerHTML please?
I have a table that is generated by some other software, each row contains 50 columns and I'm trying to break the columns by adding a </tr><tr> to the end of a <td> element.
This is the code that is generated on the fly:
<tbody>
<tr>
<td class="col1" scope="col">08/22/2014</td>
<td class="col2" scope="col">Share</td>
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<td class="col5" scope="col">8/23/2014</td>
...etc
<td class="col51" scope="col">End column</td>
If I use this Jquery:
$( ".col4").after('</tr><tr><td> </td>');
It appends but doesn't respect the </tr>....it ignores it and adds the <tr> on, resulting this code.
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<tr>
<td> </td>
</tr>
<td class="col5" scope="col">etc...</td>
Wonder what the best way to get JQUERY to append that <TR> for me? When I modify the code in Firebug, breaking the rows gives me the desired output, just not sure how to get JQUERY to give me the </tr>.
jsFiddle Example
Detach the last 2 cells, append them to tbody and wrap them with tr
$('.col4').nextAll().detach().appendTo('tbody').wrapAll('<tr />')
You cannot insert tags separately using JQuery. For instance, take the following code, which inserts a <p> element into the body:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$("body").append("<p>");
</script>
</body>
</html>
Using the Firefox inspector, this is what the DOM looks like:
Thus, $("...").append("<p>"), $("...").append("</p>"), $("...").append("<p></p>") all modify the DOM in the same way.
You cannot handle incomplete or illegally formatted HTML as DOM elements. You want to gather up the correctly formatted children before that column and stuff them into a new complete <tr>.
If you want to handle HTML as text, you need to turn it into text with html() and paste it together into actual, correctly closed HTML, and then convert it back.
I'm working with a memory object where I store almost 2,000 <tr> elements. I select certain elements from this object and add them to the page according to the user.
the structure is almost like this but with more <td>s:
<tr attribute1="value" attribute2="value">
<td class="class1">something</td>
<td class="class1">something</td>
<td class="class2">something</td>
<td>
<div class="class1">
somthing
</div>
</td>
</tr>
So I select rows on certain attributes and then want to .show() or .hide() some of the <td>
I tried to use the following:
$(myObject).find("[attribute1=value]").clone().find(".class1").show();
but this statement only returns the <td>s or <div>s that satisfy the class condition.
If these rows where not in memory I could easily use a select statement which will work perfectly:
$(".class1").hide/show()
How can I achieve that in my situation
If I understand right, .innerHTML should overwrite whatever was in a certain div or span.
For example:
<table width="90%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2" align="left">Via Email:</td>
<td width="1070" align="right"></td>
</tr>
<script>
$('#addEmail').click(function() {
document.getElementById('emailList').innerHTML = "12345";
});
</script>
<span id="emailList">
<tr>
<td width="27" align="left"><img src="icon_mail.png" width="24" height="24"></td>
<td width="228" align="left">123obama#whitehouse.com</td>
<td align="right"><span class="ui-icon ui-icon-close"></span>remove</td>
</tr>
</span>
<tr>
<td colspan="3" align="left"><br>
<input name="input4" type="text" value="vova#kremlin.ru" size="20">
<span class="ui-icon ui-icon-mail-closed"></span>Add Email</td>
</tr>
</table>
Therefor upon click of #addEmail button, everything inside would be removed and replaced by "12345".
Yet in reality it doesn't do anything to that span, but just prints out 12345 in the place, where the script is.
Any ideas what could be wrong?
The HTML is invalid — you can't wrap a <tr> in a <span>. The browser is performing error recovery on your code and producing a DOM that isn't what you expect it to be. When you try to edit the content of the span, the span probably isn't where you think it is.
… you can't put a script between table rows either.
… and you are trying to bind an event handler to a link before the link exists in the document. You either need to move the script so it appears after the link, or move the code that does the work into an event handler that runs after the link exists (such as the ready event).
It's actually your span that's wrong. A span can't ... span (I know, I know) over table rows, so it gets opened and closed somewhere between the rows (or outside the table on some browsers), so when you're overwriting it's html, it ends up somewhere else.
You should name the tr instead and overwrite its html, that should work.
You can't put a <tr> inside a <span> like that. Anyway if you're using jQuery, you should probably use its API around ".innerHTML"
$('#emailList').html("hello world");
That will do some important cleanup work for you. It's not absolutely required, but unless you know for sure what you're doing it's probably a safer option.
You are wrapping a <tr> in a span. That is going to lead to unpredictable results. Especially if you then remove the table row.