We Keep Coding

Rows-Element, where are these whitespaces coming from?

First: My problem is that by inserting strings into several fields of a form from a row via DOM, the values occure with a lot of whitespaces, both at the beginning and the end.
What I want to do:
look up the values of the cells in the row I doubleclicked, and put these values in the fields of a form.
The HTML is equivalent to :
<form>
<fieldset>
<legend> Very Important </legend>
<label for="input_representing_all_the_inputs">
<input id="input_representing_all_the_inputs"></input>
</fieldset>
</form>
<table id="issue_table" class="sortable", border="1" >
<tr ondblclick="values_into_form(issue_table)">
<td>
a value
</td>
<td>
another one
<td>
</tr>
<tr ondblclick="values_into_form(issue_table)">
<td>
here's also another value
</td>
<td>
aaand one more.
</td>
</tr>
</table>
<table id="not_the_issue_table" class="sortable", border="1">
[...] blabla looks similar [...]
</table>
Now I got a js function to look up values from the table and putting them into the form.
function values_into_form( id ) {
//find index of row with given id
for (i = 0; i<= document.getElementById("accl_content").rows.lenght; i++){
if ( document.getElementById("issue_table").rows[i].id == id) {
var idx = i;
break;
}
}
// now insert the values into the editor-form
document.getElementById("input_representing_all_the_inputs" =
document.getElementById("issue_table").rows[idx].cells[0];
// repeat the above for each input_field with the specific cell_idx.
}
}
So now, let's look at the first of the first of issue_table.
The value is "a value". However, the inputfield will contain something like " a value ".
Is there a specific misstake I made to produce this?
I don't want a solution to get rid of the whitespaces, I want a real solution, want to say, I don't want them to occure at all.
I'm fresh to JS, coming from lua. So if I made some conceptional misstakes, I would be happy if you could tell me in a sidenote.

Change your html to this:
<table id="issue_table" class="sortable", border="1" >
<tr ondblclick="values_into_form(issue_table)">
<td>a value</td>
<td>another one<td>
</tr>
<tr ondblclick="values_into_form(issue_table)">
<td>here's also another value</td>
<td>aaand one more.</td>
</tr>
</table>
The spaces are because in your html there are spaces. You could of course alternatively strip beginning and ending white spaces using javascript. But if you do not want to do that, the above solution should work.

It is good practice to separate HTML and JavaScript.
JavaScript:
var myTable = document.getElementById("myTable");
var myInput = document.getElementById("myInput");
var td = myTable.getElementsByTagName("td");
for(var i = 0; i < td.length; i += 1) {
td[i].addEventListener("dblclick", function() {
myInput.value = this.innerHTML;
});
}
Demo

onclick is set for <tr> How to disable for one <td>

Suppose onclick handler is set for a <tr> is it possible to disable/overwrite it for one particular <td>?
<tr onclick='somefunction()'>
<td> </td> <!--onclick should work here-->
...
<td> </td> <!--onclick should not work here-->
...
<td> </td> <!--onclick should work here-->
</tr>
Of course I can set it for each <td> separately or pass the name of a td to the function and decide what to do based on this name, but it seems like there should be a simpler solution.

I found the easiest was to stop the event being passed to the parent html using onclick=event.stopPropagation() in the <td> tag.
So <td class=whatever onclick=event.stopPropagation()>cell data<td>

In somefunction you could check the cellIndex of the td, and return early, if a non-clickable cell has been clicked. Something like this:
function somefunction (e) {
if (e.target.cellIndex === 1) {return;}
/* Do something, the td is clickable */
}
To get this work with an inline handler, you've to pass the event object:
<tr onclick='somefunction(event)'>
A live demo at jsFiddle.
Things will get a bit more complex, if you've elements within cells. In that case you have to find a td parent element, like so:
function somefunction (e) {
var target = e.target; // Cache the target element
while (target) { // Iterate through elements
if (target.tagName === 'TD') { // TD found, stop iteration
break;
}
target = target.parentElement; // Set target as a parent element of the current element
}
if (target === null) {return;} // Check that we really have a TD
if (target.cellIndex === 1) {return;} // A non-clickable cell clicked
:
}
A live demo at jsFiddle.
Edit 2018
In 2018 elements have closest() method, hence the loop above is not needed, target = e.target.closest('td') will make sure a td is used.
A very simple way would be to use CSS pointer-events: none, but unfortunately this doesn't work in FF in this particular case in IE<11 at all, though works well in Chrome and IE11. Also preventing pointer events would be bad, if the cell happens to contain interactive elements.
A live demo at jsFiddle.

EDIT:-
Try something like this.
HTML:
<tr id="row">
<td> </td> <!--onclick should work here-->
...
<td class="noChange"> </td> <!--onclick should not work here-->
...
<td> </td> <!--onclick should work here-->
</tr>
JavaScript:
window.onload = function() {
var row = document.getElementById("row");
for (i=0; i<row.childNodes.length; i++) {
if (row.childNodes[i].class != "noChange") {
row.childNodes[i].onclick="doStuff()";
}
}
}

<html>
<body>
<table border="1">
<tr onclick='somefunction(this)'>
<td><input type="text"></td> <!--onclick should work here--> ...
<td><input type="text"></td> <!--onclick should not work here--> ...
<td><input type="text"></td> <!--onclick should work here-->
</tr>
</table>
<script>
function somefunction(element) {
var td = element.children;
console.log(td);
var inputObj = td[1].children;
console.log(inputObj[0]);
inputObj[0].disabled = true;
}
</script>
</body>
</html>
The children property 'element.children' returns a list of an element's child elements, as an HTMLCollection object.
enjoy :)

Javascript / PHP show id or name object

I have the following table:
<table>
<tr>
<td id='test1' name='test1'class=default></td>
<td id='test2' name='test2'class=default></td>
<td id='test3' name='test3'class=default></td>
</tr>
</table>
and function:
function pop() {
alert("test")
}
When I click a <td> the popup appears with the word "test".
But, is it possible to show in this popup the ID or the Name from this <td>? I already tried with the get_class but that didn't work.

JavaScript :
function pop(el) {
alert(el.getAttribute("id")) /* instead of 'id' you can pass 'name' attribute */
}
window.onload = function(){
var elements=document.querySelectorAll('table tr td.default')
for(var i = 0; i < elements.length; i++){
var onc = function(x){return function(){ pop(x)}}(elements[i])
elements[i].addEventListener('click',onc , false);
}
}
CodeOpen

This is the answer to your question.You should remove the class because it was redandunt to the ID
<table>
<tr>
<td id='test1' name="test1" onClick="pop()"></td>
<td id='test2' name="test2" onClick="pop()"></td>
<td id='test3' name="test3" onClick="pop()"></td>
</tr>
</table>
This the Javascript
<script>
function pop()
{
alert("test");
}
</script>
I Think this could help you totally.

Copy single value into multiple columns using JAVASCRIPT

I have this code here. I need to place the value entered by the user (say integer 10), compute an operation on it and enter the answer into the row defined by my table.
I am not able to copy the same value in the 4 columns. How should I change my code?
<html>
<table>
<tr>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
</tr>
</table>
Enter Input:<input type="text" name="test"/>
<script>
function testfunc()
{
var tt=document.getElementsByName("test")[0].value;
document.getElementsByClassName("demo").innerHTML = tt*20;
}
</script>
<button onclick="testfunc()">TEST</button>
</html>

getElementsByClassName gives you a list of elements and there is no method or property on that list to manipulate all the elements in it. To manipulate the elements you'll have to iterate through the elements individually.
cells = document.getElementsByClassName("demo");
for (var i = 0; i < cells.length; i++){
cells[i].innerHTML = tt*20;
}
http://jsfiddle.net/BzmBX/

Try this function:
function testfunc(){
var tt=document.getElementsByName("test")[0].value;
var tds = document.querySelectorAll('td.demo');
var nrtds = tds.length;
for(var i=0; i<nrtds; i++) {
tds[i].innerHTML = tt;
}
}

You can also use, id's instead of classes.
Try
<html>
<head>
<script type="text/javascript">
function testfunc()
{
var tt=document.getElementById("test").value;
//alert(tt);
var log;
log = tt*20;
for(i=1;i<=4;i++)
document.getElementById("c"+i).innerHTML = log;
}
</script>
</head>
<body>
<table border=1>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td id='c1'> </td>
<td id='c2'> </td>
<td id='c3'> </td>
<td id='c4'> </td>
</tr>
</table>
Enter Input: <input type="text" id="test" name="test"/>
<button onclick="Javascript:testfunc();">TEST</button>
</body>
</html>

You're almost there, only problem with the code is that the Javascript function getElementsByClassName returns a set of elements which have all the given class names.
So the correct Javascript code would be:
<script>
function testfunc() {
var tt = document.getElementsByName("test")[0].value;
// Loop through all demo table columns returned.
demoColumns = document.getElementsByClassName("demo");
for (var i = demoColumns.length - 1; i >= 0; i--) {
demoColumns[i].innerHTML = tt * 20;
};
// Incorrect.
// document.getElementsByClassName("demo").innerHTML = tt*20;
}
</script>
In your example you were trying to set the inner HTML on a collection as opposed to a single DOM element.

You might probably want to restrict to changing the contents of the table only. So adding a id "demoTbl" for the table, and using document.getElementById("demoTbl").getElementsByClassName("demo") will only search for element with class "demo" in the table id="demoTbl"
<html>
<table id="demoTbl">
<tr>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
<td class="demo"></td>
</tr>
</table>
Enter Input:<input type="text" name="test"/>
<script>
function testfunc()
{
var tt=document.getElementsByName("test")[0].value;
var sel = document.getElementById("demoTbl").getElementsByClassName("demo");
for (var i=0; i<sel.length; i++) {
sel[i].innerHTML = tt*20;
}
}
</script>
<button name="test" onclick="testfunc()">TEST</button>
</html>

Show/hide tables with jQuery

I have a series of tables similar to the following html code:
<table id="film"><tr>
<th class="1">//HEAD CONTENT 1//</th>
</tr>
<tr>
<td class="1">//BODY CONTENT 1//</td>
</tr></table>
<table id="film"><tr>
<th class="2">//HEAD CONTENT 2//</th>
</tr>
<tr>
<td class="2">//BODY CONTENT 2//</td>
</tr></table>
I want the tables to expand individually when the respective head (<th>) is clicked. Moreover the tables should start unexpanded. I use the following jQuery script:
$(document).ready(function(){
$('#film td').hide();
});
$(document).ready(function(){
var n1 = 0;
$('#film th.1').click(function(){
if(n1 == 0){
$('#film td.1').show();
n1 = 1;
}else{
$('#film td.1').hide();
n1 = 0;}
});
var n2 = 0;
$('#film th.2').click(function(){
if(n2 == 0){
$('#film td.2').show();
n2 = 1;
}else{
$('#film td.2').hide();
n2 = 0;}
});
});
However when I execute only the top table is able to show/hide not the second one.
Can anyone see where I'm going wrong?

You are using the same id on multiple elements. When you search by id, jQuery will only return one item (the first with that id). So your code is only acting on the first table. Use a class on the tables instead of an id.
<table class="film">......</table>
$('.film').each(function(f) {
//this function will execute for each element with the class "film"
//refer to the current element during this function using "$(this)"
});

A much easier way to do this is to use a class instead of an id for the table values. This way they can be referred to as a group more easily
<table class="film"> ...
After which the following jquery should give you the behavior you're looking for
$(document).ready(function() {
$('.film td').hide();
$('th').click(function() {
$(this).parents('table').find('td').toggle();
});
});
Fiddle: http://jsfiddle.net/WZUAZ/1/

Here is a working version: http://jsfiddle.net/6Ccj7/
Your html is broken. Change this:
<td class"2">//BODY CONTENT 2//</td>
To this:
<td class="2">//BODY CONTENT 2//</td>
Also, you used id for film when in fact you have 2 instances. You class instead:
<table class="film"><tr>
<th class="1">//HEAD CONTENT 1//</th>
</tr>
<tr>
<td class="1">//BODY CONTENT 1//</td>
</tr></table>
<table class="film"><tr>
<th class="2">//HEAD CONTENT 2//</th>
</tr>
<tr>
<td class="2">//BODY CONTENT 2//</td>
</tr></table>
Here is the updated JS:
$(document).ready(function(){
$('.film td').hide();});
$(document).ready(function(){
var n1 = 0;
$('.film th.1').click(function(){
if(n1 == 0){
$('.film td.1').show();
n1 = 1;
}else{
$('.film td.1').hide();
n1 = 0;}
});
var n2 = 0;
$('.film th.2').click(function(){
if(n2 == 0){
$('.film td.2').show();
n2 = 1;
}else{
$('.film td.2').hide();
n2 = 0;}
});
});

Two problems:
First, Your HTML is broken
Change
<td class"2">//BODY CONTENT 2//</td>
To
<td class="2">//BODY CONTENT 2//</td>
Second, HTML id's should be unique so I suggest using classes instead.
Here is a working example: http://jsfiddle.net/jkohnen/tBkh4/
I used .toggle() to simplify the jQuery a bit
Hope that helps, and Happy Coding.

show/hide table with jquery
Code here !
i'm useslideToggle + data attr

Using this jQuery you can show & hide
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
html
<button id="hide">Hide</button>
<button id="show">Show</button>