<div class="wrapped">
<table id="tabled">
<tr>
<td>abc</td>
<td>def</td>
<td><input type="checkbox" class="chkbox" id="val" onclick="myFunction(this.id)"></input></td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td><input type="checkbox" class="chkbox" id="val1" onclick="myFunction(this.id)"></input></td>
</tr>
</table>
</div>
The IDs of checkbox are automatically generating with my some code. Plus there is a loop on the DIV with Class Name "wrapped". This whole Code prints for least 2 times. And seems like that
<div class="wrapped">
<table id="tabled">
<tr>
<td>abc</td>
<td>def</td>
<td><input type="checkbox" class="chkbox" id="val1" onclick="myFunction(this.id)"></input></td>
</tr>
</table>
</div>
<div class="wrapped">
<table id="tabled">
<tr>
<td>abc</td>
<td>def</td>
<td><input type="checkbox" class="chkbox" id="val2" onclick="myFunction(this.id)"></input></td>
</tr>
</table>
</div>
Now I am trying to add some JS which help me to get the div with class 'Wrapped'. Here is my js
function myFunction(el) {
var el = document.getElementById(el);
var r1 = el.closest(".wrapped");
alert (r1.innerHTML);
}
It always returns me the HTML of the First div with class 'Wrapped'. What I want is that if i click checkbox with ID val2 it should return me the second div with class 'Wrapped'. But in all my struggle around the net I am only getting first in all options. Thanks In advance
But it is correct and returns desired .wrapped div.
Also you can pass the .wrapped directly to your function:
onclick="myFunction(this.closest('.wrapped'))"
And js:
function myFunction(wr) {
alert (wr.innerHTML);
}
Related
In a table there are multiple rows, what I want is if I click on a particular name of user like "Sam" and "Adem" I want to get the value of checkbox which only relates to that row.
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Username</td>
<td>Rank</td>
<td>Address</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id="" value="1"></td>
<td>Sam</td>
<td>Sam001</td>
<td>Admin</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="2"></td>
<td>Adem</td>
<td>Adem002</td>
<td>Manager</td>
<td>ZYZ</td>
</tr>
<tr></tr>
<tr></tr>
Attach click event on TD elements. In the handler find the checkbox using .parent() and .find() methods. When you have found the checkbox, get its value using .val() method.
My previous question is here but it seems that using only window and document cannot get it done. What I want is that when the text from the first row is selected, the first input will be filled. Same for the second row.
javascript - select text in table cell and autofill the input on the same row
https://jsfiddle.net/nrdq71pz/6/
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
This is jQuery solution. (Actually easier than i thought, i've thought that selection text inside elements can't be reached so easily, but...):
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
Demo:
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
td {
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
<tr>
<td>Test code 3</td>
<td>
<input type='text' id='input3' class="selection" />
</td>
</tr>
</table>
So, point is to put event on cell, and then reach closest input (in your current hTML structure, this works, if you change something, you can modify it, easily, i guess)
I'm having trouble figuring out what you are asking but does this get the job done? When you click "Test code 1" it will fill in the input value to "Hello".
https://jsfiddle.net/nrdq71pz/8/
Html:
<table>
<tr>
<td class="select">Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
jQuery:
$('.select').click(function(){
$('#input1').val("hello")
})
I just noticed your comment on a post above. I think what I did was wrong so take a look at what I did here and tell me which one is closer to what you need. https://jsfiddle.net/nrdq71pz/9/
I am trying to show/hide rows in a HTML table by javascript. Checking the check box shall show the additional rows, unchecking it shall hide them.
<html><body><form><table>
<tr>
<td> This row is always visible. </td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" onchange="for(e in document.getElementsByClassName('switchMe')) e.style.display = document.getElementById('cbox').checked ? 'block' : 'none';"/>
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td> This row will be shown after the user clicks the check box. </td>
</tr>
<tr class="switchMe" style="display: none; ">
<td> This row too. </td>
</tr>
<tr>
<td> This row is always visible. </td>
</tr>
</table></form></body></html>
However, nothing happens, and I get an e.style is undefined error in the console. How do I access the style attribute of the <tr> element correctly?
(I first tried putting the rows in question in a <div>. That doesn’t give any error, but the rows are always visible, and the <div> is absent in Firebug, so it is probably not allowed there.)
First, for..in is ideal for iterating over objects but not on NodeList.
Second, its a bad practice to have change event listener in html. Anyone can change markup using dev tools and manipulate behaviour of your system. You should use .addEventListener
Third, defining a variable without var will make it global.
Output of for..in
var el_list = document.querySelectorAll('.switchMe');
for(var el in el_list){
console.log(el)
}
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
Sample
JSFiddle
document.querySelector('#cbox').addEventListener('click', function(e) {
var switchEl = document.querySelectorAll('.switchMe');
for (var i = 0; i < switchEl.length; i++)
switchEl[i].style.display = this.checked ? 'block' : 'none';
});
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
You are having an issue with the use of the for...in loop. This isn't really the loop that you should choose for an Array or an (Array like) object, they should only be used for iterating through object keys and properties as they are very slow on array's where there are much faster methods available.
for...in also modifies state so you should have that available eg.
const thing = { one: 1, two: 2 }
for (key in thing) {
console.log(thing[key])
}
You are referencing the thing from the outer scope inside the loop
I Think this is a better way as you are not dealing with any external state when you do your iteration.
const rows = Array.from(document.getElementsByClassName('switchMe'))
const cbox = document.getElementById('cbox')
function changeHandler() {
rows.forEach(row => {
row.style.display = cbox.checked ? 'block' : 'none'
})
}
<html>
<body>
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" onchange="changeHandler()" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
</body>
</html>
One way to implement what you were trying to do without creating a function as the other answers did would be to do it as shown below.
However this doesn't mean you should do it this way. In practice definitely use the other answers shown.
<html>
<body>
<form>
<table>
<tr>
<td>This row is always visible.</td>
</tr>
<tr>
<td>
<input id="cbox" type="checkbox" onchange="var arr = document.getElementsByClassName('switchMe'); for(var i = 0; i < arr.length; i++) arr[i].style.display = document.getElementById('cbox').checked ? 'block' : 'none';" />
<label for="cbox">Show more …</label>
</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row will be shown after the user clicks the check box.</td>
</tr>
<tr class="switchMe" style="display: none; ">
<td>This row too.</td>
</tr>
<tr>
<td>This row is always visible.</td>
</tr>
</table>
</form>
</body>
</html>
I want to Check or Uncheck an Checkbox which is part of an tr.
From this tr I already have the Name as Information.
I need something like "Uncheck checkbox on tr where tr.name = $name"
<tr>
<td id="klauselname">
002
</td>
<td>
50591
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="klauselname">
003
</td>
<td>
50601
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
Do u have any idea? o.o
First of all , as others pointed out , IDs in your DOM should always be unique. You can use classes or other attributes for mass manipulation , but not IDs.
So lets clear the duplicate ids like this and at the same time add some IDs on your Checkboxes.
<tr>
<td id="myUniqueID_1">002</td>
<td>50591</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_3">
<input id='myCheckBox_1' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="myUniqueID_2">003</td>
<td>50601</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_4">
<input id='myCheckBox_2' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
now we can add a function that will take care the Checkbox changes. We will use the checked property and will change it to false or true depending on our needs.
<script>
function changeState(elID){
var myCheckBoxStatus = document.getElementById(elID).checked;
if(myCheckBoxStatus)
document.getElementById(elID).checked = false;
else
document.getElementById(elID).checked = true;
}
</script>
and lets also place a button to test it out
<button onclick='changeState("myCheckBox_2");'>Toggle</button>
This question already has answers here:
How can I swap the form values of table row1 by the form values of table row2 without changing the table rows using javascript?
(7 answers)
Closed 7 years ago.
I am trying to swap the form values in row1 with the form values of row2 without swapping the rows. Can someone show me away to achieve this in pure javascript, vanilla JS, or jquery. I made the table rows shorter with just two rows, but the actual table consists of 17 rows. Please look very closely at the ids and form values in the third example.
When the UP or DOWN button is not click, the table looks like this in simple form:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="up_arrow">UP</button></td>
<td><input value="1></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
</tr>
<tr id="row2">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This the code currently - When the UP or DOWN buttons are clicked the table looks like this:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
</tr>
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This is what I am trying to accomplish - The values of the inputs should swap except for the tr. Notices the tr ids remain the same but form values are swapped:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
</tr>
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
Instead of trying to rearrange each individual form element, this just swaps the entire row, which has the same result with a lot less effort:
$('.down_arrow').click(function() {
$(this).closest('tr').insertAfter($(this).closest('tr').next());
});
$('.up_arrow').click(function() {
$(this).closest('tr').insertBefore($(this).closest('tr').prev());
});
table tr:first-child .up_arrow {
opacity: 0
}
table tr:last-child .down_arrow {
opacity: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I took the liberty of fixing up the broken <option> tags here. If that was supposed to be two separate <select>s, this code will still work exactly the same -->
<table>
<tr>
<td>
<button class="down_arrow">↓</button>
<button class="up_arrow">↑</button>
</td>
<td><input value="1"></td>
<td><select><option>1</option><option>1a</option></select>
</td>
</tr>
<tr>
<td>
<button class="down_arrow">↓</button>
<button class="up_arrow">↑</button>
</td>
<td><input value="2"></td>
<td><select><option>2</option><option>2a</option></select>
</td>
</tr>
<tr>
<td>
<button class="down_arrow">↓</button>
<button class="up_arrow">↑</button>
</td>
<td><input value="3"></td>
<td><select><option>3</option><option>3a</option></select>
</td>
</tr>
<tr>
<td>
<button class="down_arrow">↓</button>
<button class="up_arrow">↑</button>
</td>
<td><input value="4"></td>
<td><select><option>4</option><option>4a</option></select>
</td>
</tr>
</table>
It may be better to bind the events to the table itself instead of each individual button:
$('table').on('click','.down_arrow',function() {...});
That way you can add or remove table rows programmatically without having to add new bindings. (In that vein, in general be wary of using .html() to overwrite parts of the the DOM, as it will blow away any event bindings you may have already included.)