Develop Reference

Is it possible to take the text inside of a element and display it ::Before css

Im working on a table, and was trying to figure out a more automatic way to fill in the ::before content: ' ';
<table>
<thead>
<tr>
<th id="text">word</th>
</tr>
</thead>
I was trying to use javaScript to do this.
table th:nth-child(1)::before {
content: attr('');
}
is it possible to use javascript to get the text inside the id "text" and use it in css to display it using ::before "word"?

No, :before and other like it are pseudo elements and are actually, not part of the dom so you can't select them with javascript. However, if you generate the elements dynamically, you could include the content of pseudo elements as attributes on the actual element and use that instead from javascript
eg:
<table>
<thead>
<tr>
<th id="text" before-content:"myBeforeContent">word</th>
</tr>
</thead>
If you have a predetermined set of :before content values for example and you define all of them in a css file, you could split the :before in a single class, and use that to later make a connection with a map of contents in javascript
for example:
#myElement {
}
#myElement.redBeforeContentClass:before {
content:"actual red content"
}
and in javascript, you could have a map like :
{
"redBeforeContentClass", "actual red content"
}
At this point, you could just make a match between a DOM object's class and your map of contents.
All this are just hacks to achieve the desired action, and they might require some work to get them to work, but still. If you really need to do this, that works

You could use a trick here (you would need javascript as well).
In the CSS, you can write :
table th:nth-child(1)::before {
content: attr(data-before-content);
}
And in javascript on the document ready function :
$(function() {
$('table th:nth-child(1)').attr('data-before-content','new_value');
});
See if it changes, and if it does, you can change that dinamically.

One way with javascript is not worry about using ::before and just prepend the id to existing text
$('tr').each(function(){
$(this).find('td:first').text(function(_, oldText){
return this.id + ' ' + oldText;
});
});
Or for more style control use html()
$('tr').each(function(){
$(this).find('td:first').html(function(_, oldHtml){
return '<span class="ident">'+ this.id + '</span>' + oldHtml;
});
});

targeting inner html of second element child of a table

I am trying to target the second child element of my table. In this case, I would want to write the inner HTML of the second cell of the row, which is "Travolta." I've used the firstChildElement and lastChildElement with success, but having trouble targeting the second one. Any help would be appreciated! Example code can be found below:
HTML:
<tr class="table-row">
<td>John</td>
<td>Travolta</td>
<td>j.travolta#gmail.com</td>
</tr>
Javascript:
var rowTag = document.getElementsByClassName("table-row");
document.write(rowTag[0].firstElementChild.innerHTML);
--> returns "John"
document.write(rowTag[0].lastElementChild.innerHTML);
--> returns "j.travolta#gmail.com"

Since it's the second element child, perhaps use children[1] (it's a 0-based collection):
var text = rowTag[0].children[1].innerHTML;
Note that firstElementChild and children are supported on modern browsers, but if you have to support IE8, you're stuck with writing a function to skip past non-element nodes.

Get innerHTML like this
var tr = document.getElementsByClassName('table-row');
alert(tr[0].getElementsByTagName('td')[1].innerHTML);

Perhaps rowTag[0].firstElementChild.nextElementSibling.innerHTML

There is a CSS selector, nth-child().
Just put the child number inside the parenthesis.
Using JQuery, here's how this would solve your problem:
$('tr.table-row>td:nth-child(2)') is a straightforward selector to retrieve the required element using JQuery. To set its HTML is simply a matter of using the html() function like this:
$("tr.table-row>td:nth-child(2)").html("SET HTML HERE");

jquery affect all instances of a table id

I have a table that's generated through php. Whenever "bob" is the name of the person who this data belongs to, I generate a tr id to denote that:
<tr id="0bob">...</tr>
<td>...</td>
<tr id="0bob">...</tr>
<tr id="0bob">...</tr>
<tr id="0bob">...</tr>
<tr id="0bob">...</tr>
The data inside each of the tds inside of the trs is different, and the user has to select which of these rows they want, using this checkbox:
print "<input type=\"checkbox\" id=\"check\" data-border=\"$border\" data-z=\"$z\" data-x=\"$x\" data-pn=\"$pn\" value=\"\">";
Then, in my JavaScript, I have the following line which is supposed to dim all of these lines whenever one of the checkboxes in these trs is clicked.
var pn = this.dataset.pn;
var x = this.dataset.x;
//anytime a checkbox with the id 'check' is clicked, (this is every checkbox on the page)
$('input[type="checkbox"][id="check"]').change(function() {
$( "#" + x + PN ).fadeTo( "slow" , 0.7, function() { });
}
The code, in my mind, is accurate - I'm asking for any td with the id of 0bob to be faded to 70%. The issue is that while the code "works," it only fades the first instance of this, then stops, like so:
It always fades the first instance, (red in this example,) regardless of which color the user selects, (blue, pink, or yellow).
I also can't use a tr class because I'm already using the class to change other aspects of the formatting. What am I doing wrong here?

You must use class. Ids must be unique and the browser will get angry if you duplicate them. You can pass multiple classes as follows:
<element id="some-id" class="class1 class2 class3">
From JavaScript classes can be added or removed using classList. JQuery has https://api.jquery.com/addclass/ method.

You should be using data-* attribute since ID is meant to occur once in the document. You can however work around this limitation by using an attribute selector like $('[id=0bob]'). See for example http://jsfiddle.net/Lk7dqbp6/

Your problem is that id attributes must be unique.
And the browser does that: finds the first element with that id and stops there, as it should.
Using repeated ids is invalid HTML and must be avoided like plague.
There are many alternatives for this.
I will only write the HTML structure for this.
Solution 1: a data-* attribute
You already use those, so, just use another one!
<tr data-user="bob"></tr>
These were made with the goal of providing aditional data about an element.
Solution 2: another class
You can have multiple classes per element.
Just make sure they are separated by a space:
<tr class="user-bob another-class more classes"></tr>
This may be harder to use.
Solution 3: another id schema
If you have a primary key on your SQL, you can use it to identify the user:
<tr id="user_bob_0"></tr>
<tr id="user_bob_1"></tr>
<tr id="user_bob_2"></tr>
This may be a bad idea in some situations but it will have all the data ready to use without many troubles.
Outside the scope of the answer, you have another problem:
You have this code:
var pn = this.dataset.pn;
var x = this.dataset.x;
//anytime a checkbox with the id 'check' is clicked, (this is every checkbox on the page)
$('input[type="checkbox"][id="check"]').change(function() {
$( "#" + x + PN ).fadeTo( "slow" , 0.7, function() { });
}
You see the comment?
Same problem: non-unique ids...
For this one, you would be better off using classes.
Instead of
$('input[type="checkbox"][id="check"]')
You would use
$('input.check')
Or
$('.check')
This is the right way to do it.
Also, the performance gain will be HUGE!
Attribute selectors (like [type="checkbox"] and [id="check"]) are one of the slowest selectors!
The only selectors slower than these are the pseudo-element selectors (:before, :after, ::selection, ...).
You can read more here: Is CSS faster when you are specific?
You may be thinking that this won't affect jQuery, but it will.
jQuery uses document.querySelectorAll() which runs a CSS selector in the DOM to select Javascript objects. (When it fails or isn't available, jQuery uses other methods)
Imagine your jQuery looking for over 300 elements for the selector in each of them.
Now imagine a basic table with the classes, where a few elements are connected to an entry.
See the difference?
This is the difference between your code taking 200ms and 30ms (non-measured).

How do I search and remove/append a row in Jquery or Javascript?

If I have a table
<table id="myTable"><tr><td>First Thing</td><td>First Value</td></tr>
<tr><td>Second Thing</td><td>Second Value</td></tr>
<tr><td>Third Thing</td><td>Third Value</td></tr>
</table>
How can I use JQuery or javascript to search to get the index of the row with text "Second Value" and remove it? Also is it possible to create a new row
<tr><td>Fourth Thing</td><td>Fourth Value</td></tr>
with the click of a button? Will I have to iterate through the existing rows to get the last index of the row to insert it in?

You can achieve this easily using the :contains() selector, the remove() function, and the append() function. You don't need to iterate through the rows to find what you're looking for.
To get the index:
$("#myTable").find("td:contains('Second Value')").parent().index();
To remove it:
$("#myTable").find("td:contains('Second Value')").parent().remove();
To add a row:
$("#myTable").append("<tr><td>Fourth Thing</td><td>Fourth Value</td></tr>");
working example: http://jsfiddle.net/hunter/PzJWC/

You should ideally generate id's per each tr/td - but thats if you getting data dynamically i suppose.
If you know the order of your tables then you can use these sleectors from jQuery
$('tr:last-child').html('<p>This is the absolouty last tr in the WHOLE page<p>')
$('tr:nth-child(even)').addClass('evenColors')
$('tr:nth-child(4n)').remove() //Removes the 4th from the top TR DOM Element
var theValueOf = $('tr:first-child').html() //assigns the innerHtml to your var
So if you have 10 tables each table should have an id or class
<table id="table1"> ...bla... </table>
$('table1 tr:last-child').remove() //Remove last TR from Table1
You will need to structure your html more with id's and classes
In your case you will have to restructure your table some how programatically to atach unique ids to each row then use jquery to select it. This is ideal world
But you do a loop and check each inner html until what you want and do a .remove()
But to get the INDEX use hunters reply! But from experience this is a headache on large and dynamic documents.

JQuery has .insertAfter and insertBefore. For targeting you can also use nth-child css selector or if you want it dynamic (like insert a row after the row they click) you can use the 'this' operator and some dom navigation. All that said be very careful when editing tables on the fly, they have some peculiarities about where things can be inserted and are heavy on performance.

i just did it ;)
to add row (you may not want to use append because your table may have tbody etc):
$('#myTable tr:last').after('<tr id="forth_row"><td>forth thing</td><td>forth value</td></tr>');}
to find and remove that row:
$('#myTable').find("#forth_row").remove();

jQuery: I have a class, I'm iterating it with each. The result is different each turn. How to use the this and access the value?

I'm a beginner and this is my first time encountering problem like this.
I'm iterating a class using the each method provided by jQuery. The page have many class with the same name. So we can expect that it may be 15 iterations.
Each iteration have different value.
$(".book").each(function(n) {
var result = $(this
I have to get the last TD with the value List. So my option is to use
$(".book tbody tr:last")
But I think this thing wouldn't work in the each environment because it won't know which context it is currently processing.
The $(this tbody tr:last) wouldn't work also. How can I devised a selector that will work?
<div class = "book">
<p class = "chapter">
<table>
<tbody>
<tr>
<td>General</td>
<td>
<b>Buck</b>
</td>
</tr>
<tr>
<td>General</td>
<td>List</td>
</tr>
</tbody>
</table>
</p>
</div>

Assuming the HTML you posted there is a single book and there are many others exactly like it, and you want access to the last <tr> in each one of them, this should work:
$('div.book tbody tr:last-child').each(function() {
var value = $(this).find('td').eq(1).text();
});
value would then be "List" with the HTML above, and if you have several <div>s it would iterate as you might expect through the last <tr> of each one of them.
The key here is that we are using last-child instead of simply last. The last documentation says that it will match the last selected element; we don't want that. What we want instead is what last-child describes: Matches all elements that are the last child of their parent. This distinction is important in this particular case as we only want the last child of the particular table we're currently in, we don't want the last result overall.
If you wanted the last <td> in each last <tr>, we could even do this:
$('div.book tbody tr:last-child td:last-child').each(function() {
var value = $(this).text();
});
This selector would select each last child <tr> and select its appropiate last-child <td>. This would be best if you don't care what the value of the first <td> is. If you do then you want to use the first one.

If you're only looping over the tr:last elements, Paolo's answer should work for you. However, if you're need to run more than one query against each div.book, try this instead:
$("div.book").each(function() {
$("tbody tr:last", this).doStuff();
$("p.chapter", this).doOtherStuff();
}
The second argument to the dollar function is the "context node" and defaults to document (i.e. it "searches" the entire DOM).