Develop Reference

How to add hover effect to <table> using CKEditor?

I draw a table in CKEditor.
You can see current my table look like this.
Currently, I want to hover columns of the table and it will auto highlights check icon with the colour orange.
I found to change CSS:
CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');
I don't know how to apply in the table.
My table has structure like:
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>

Here is a script to highlight columns where there is checkmarks with an orange background-color.
var CKE = $( '.editor' );
CKE.ckeditor();
var columnIndex=0;
$("#update").click(function(){
// Output CKEditor's result in a result div
$("#result").html(CKE.val());
// If there is a table in the result
if( $("#result").find("table") ){
console.log("Table found.");
// On mouse over a td
$("#result").find("td").on("mouseover",function(){
// find the column index
columnIndex = $(this).index();
// Condition is to ensure no highlighting on the 2 firsts columns
if(columnIndex>1){
$(this).closest("table").find("tr").each(function(){
var thisTD = $(this).find("td").eq(columnIndex);
// If cell is not empty
// is the html entity for a space
// CKEditor always insert a space in "empty" cells.
if( thisTD.html() != " " ){
thisTD.addClass("highlight");
}
});
}
// Clear all hightlights
}).on("mouseout",function(){
$(this).closest("table").find("td").removeClass("highlight");
});
}
// Console log the resulting HTML (Usefull to post HTML on StackOverflow!!!)
console.log("\n"+CKE.val())
});
I took the time to make a demo based on your table.
Please, next time, post your HTML!!!
See working demo on CodePen

Using .find() and .each() in JS/Jquery

I've a PHP file which is a view (so mainly HTML) composed of several tables.
When the user click on one of the button, I want that the variables that are into my cells (and into the correct table) are sent to a Table in my Database.
To do this i'll use AJAX later, but at the moment i've a problem using JS/Jquery.
So I did something like this :
$('.boutton').click(function(){
$(?).find('td input').each(function(){
console.log($(this));
console.log($(this).val());
var iValue = $(this).val();
var sAllId = $(this).attr('id');
var sName = $(this).attr('name')
});
});
My table and buttons are into a div which has as id "table" + the number of the table.
I don't know what to do since I want this to work on every table, and on every button. It has to select only the td input that is into the table where the button was clicked.
My HTML is into a variable $sHtml since everything in this table are made of datas (in my DB) but it should be something like this :
<table id = "domaine-1-south">
<tr>
<th>BlaBla</th> // Several times
</tr>
<tr>
<td>Blabla</td>
<td><input id = "1#1#1#" name="high"></td>
<td><input id = "1#1#1#" name="mid"></td>
<td><input id = "1#1#1#" name="low"></td>
</tr>
<tr>
<td>Blabla</td>
<td><input id = "1#1#2#" name="high"></td>
<td><input id = "1#1#2#" name="mid"></td>
<td><input id = "1#1#2#" name="low"></td>
</tr>
For the id 1#1#1# the last 1 is for the number of the line and the second one is for in which table I'm.

You could use "start with" selector ^= to select all tables that have an id start with table :
$('[id^="table"]').find('td input').each(function(){
But in your OP you want to select the specific table related with the clicked button .boutton, so i guess that you have this button inside the table so you could select the current table using :
$(this).closest('table[id^="table"]').find('td input').each(function(){
Hope this helps.

Use javascript to Transfer Text

I have got 3 tables in html that at a certain time, i want to move text from 1 table will move to another. Can someone show me a javascript function ( just a few lines long - don't spend too long) that can transfer text from one td to another.

Transferring ONE td value to another:
Well if you assign a td an ID (ex. "firstTD", "secondTD"), you could store it's value in a variable (ex. "tdToMove"):
var tdToMove = document.getElementById("firstTD").innerHTML;
document.getElementById("secondTD").innerHTML = tdToMove;
Note: This will only copy the innerHTML of a single td, and duplicate it on the other. If you wish to clear the first entry, run:
document.getElementById("firstTD").innerHTML = "";
to render the first td 'blank'.
You will have to experiment to find a way to move ALL values to the other table, this was just a pointer.
Also, If the text is moving from table to table, and the tables remain identical, why not just place the input in both to begin with, OR, simply run a code to duplicate the table when you would like to move the data?

You can use Node.textContent property to get and set the text of a Node.
Here is a link about it:https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
I have made a fiddle to show you that in action: https://jsfiddle.net/3dep0msg/
In this fiddle i transfer the text of cell1 to cell2 and add it to the text of cell2.
I use textContent and not innerHTML property, because you wanted to transfer ONLY text!
function copyTextFromCell(id1,id2){
var cell1= document.getElementById(id1);
var cell2= document.getElementById(id2);
cell2.textContent = cell2.textContent+cell1.textContent;
}
copyTextFromCell("cell1","cell2");

if you want to do this using jquery.
<table id="table1">
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
<table id="table2">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
$('#table1 tr').each(function (indexR, element) {
$(this).find('td').each(function (index, element) {
var table2Rows = $('#table2 tr');
var table2Row = table2Rows.eq(indexR);
var table2Column = table2Row.find('td');
var table2cell = table2Column.eq(index);
table2cell.html( $(this).html());
});
});
working fiddle.

using each method in jquery

I have a table which has input checkboxes.
When user selects checkbox I'm saving this value attribute to an array...so the user is clicking, checking and unchecking and after some time he will press the button.
In the button click event I'm trying to iterate through each of the records and check if the each input[type="checkbox"] has the same value as the one in the array, so if the values are the same then I will read all the td values from that row.
This is my code:
$('#something').click(function(){
$( "tr td input" ).each(function(index) {
//selected is an array which has values collected from the checked checkboxes..for example [2,3]
for(var i=0;i<selected.length;i++)
{
if($(this).val()==selected[i][0].value)
{
alert($('tr').eq(index).find('td').eq(1).text());
}
}
});
});
And html code:
<table>
<tbody>
<tr>
<td><input type="checkbox" value="on"></td>
<td>ID</td>
<td>Name</td>
</tr>
<tr>
<td><input type="checkbox" value="0"></td>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td><input type="checkbox" value="1"></td>
<td>2</td>
<td>Steve</td>
</tr>
</tbody>
</table>
So for example if I have value [1] in the array. How can I get all the row information from that? My code is not working. Any idea?

I created a plunk that iterates over each input, reads the values and writes them to an array:
var checkBoxCollection = new Array();
var cb = {};
$("button").click(function(){
$("input").each(function(index, el){
id = $(el).attr("id");
val = $(el).val();
isChecked = $(el).is(':checked');
console.log(index, id, val);
checkBoxCollection.push({'id': id, 'val': val, 'isChecked': isChecked});
}); // each
console.log(checkBoxCollection);
}); // button.click
You could use this way to select the cell value as soon as the button is clicked and would only have to test if the box was checked. To learn how to use the console and the chrome dev tools you may take a look at this 7 minute video
Update with one checkbox for all
In my updated plunk you can see that i use two different selectors
// using different selector - see my comment and tell me if you can not do that
Select all <input class="cbAll" type="checkbox" id="cbAll" value="on">
// and each checkbox like this
<input class="cb" type="checkbox" id="cb0" value="0">
And the javascript
$("input.cbAll").click(function(){
$("input.cb").each(function(index, el){
// javascript ternary operator is optional this switches each checked state
$(el).is(':checked')
? $(el).prop('checked', false)
: $(el).prop('checked', true);
}); // each
});
Update including the copy of the text inside the <td>
In this plunk the text from the cells in the same tablerow of the checbox is copied into the array. The relevant code are these lines
isChecked = $(el).is(':checked');
if(isChecked){
var cells = $(el).parent().parent().children();
var cellId = cells.eq(1).text();
var cellName = cells.eq(2).text();
checkBoxCollection.push({'id': id, 'val': val
, 'isChecked': isChecked
, 'cellId': cellId
, 'cellName': cellName});
console.log(index, id, val, cellId, cellName);
}
In the screenshot you can see that the values of each checked textbox are copied.
As far as i can tell i solved all your questions:
use of jquery each to iterate over checkboxes
copy the text of cells within a tablerow into an array if the checkbox of that row is checked
If i understood your questions not fully please clarify what you would like to know.

It appears that the condition if($(this).val()==selected[i][0].value) is not true.
If it is a simple array, you don't need .value in the end. Simply compare with selected[i][0]
if($(this).val()==selected[i][0])

Jquery conditional statement

My html
<tr id="uniqueRowId">
<td>
<input class="myChk" type="checkbox" />
</td>
<td class="from">
<textarea class="fromInput" ...></textarea>
</td>
<td class="to">
<textarea ...></textarea>
</td>
</tr>
I have a table where each row is similar to the above with only one exception: not all rows will have textreas. I need to grab all rows that have textareas AND checkbox is not "checked".
Then I need to leaf through them and do some stuff.
I tried something like:
var editableRows = $("td.from .fromInput");
for (s in editableRows)
{
$s.val("test value");
}
but it didn't work.
1) how do I grab ONLY the rows that have checkboxes off AND have fromInput textareas?
2) how do I leaf through them and access the val() of both textareas?

I am sure this could be optimized, but I think it will work.
$("tr:not(:has(:checked))").each(function(i, tr) {
var from = $(tr).find("td.from textarea").val();
var to = $(tr).find("td.to textarea").val();
//now do something with "from" and "to"
});
See it working on jsFiddle: http://jsfiddle.net/RRPqb/

You can use this to select the rows:
$('tr', '#yourTable').has('input:checkbox:not(:checked)').has('textarea')
Live demo: http://jsfiddle.net/simevidas/Zk5EH/1/
As you can see in the demo, only the row that has a TEXTAREA element and a unchecked checkbox will be selected.
However, I recommend you to set classes to your rows: the TR elements that contain TEXTAREA elements should have a specific class set - like "directions". Then you could select those rows easily like so:
$('tr.directions', '#yourTable').each(function() {
if ( $(this).find('input:checkbox')[0].checked ) return;
// do your thing
});

$("tr:not(:has(:checked)):has(input.fromInput)")
Should be what you need. All the rows that don't have anything checked but that do have an input with the class 'fromInput'
If you want to loop through them to get the value of any textarea just extend your selector:
$("tr:not(:has(:checked)):has(textarea.fromInput) textarea")
Or as above if you want to be able to distinguish them:
$("tr:not(:has(:checked)):has(textarea.fromInput)")
.each(function() {
var from = $(this).find("td.from textarea").val();
var to = $(this).find("td.to textarea").val();
})
I don't know how much performance is a concern here, but if it is, then rather then writing a selector to find rows that contain a textarea you may find it helps to add a class to the row itself.
<tr class="hasTextarea">
Then you could alter your JQuery as so:
$("tr.hasTextarea:not(:has(:checked))")