I'm trying to change a few table cells in a function which I've reduced down to this short snippet, to help me understand what is going wrong.
I basically need to use column indexes on an identified <tr> table row and change the value shown in that cell.
I've tried, from looking at various code that accesses table rows,
tr.col[1].innerHTML = "NEW NAME";
tr.cell[1].innerHTML = "NEW NAME";
Also, I'm currently using jQuery as this is part of an ajax call but this might be complicating things. I'm new to JS and jQuery and don't know which parts are which (I know var tr = $('#tbl_id_4') doesn't work without jQuery
function ChangeName(){
alert('Clicked');
var tr = $('#tbl_id_4');
tr[1].innerHTML = "NEW NAME";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" onclick="ChangeName()" value="Click Me" />
You're using the index accessor on the #tbl_id_4 element. As such you're looking for the second element with that id, which obviously does not, and cannot, exist.
To fix this you need to look at the children() of the tr. Also note the use of an unobtrusive event handler in this example. Inline event attributes are no longer good practice and should be avoided where possible.
document.querySelector('.button').addEventListener('click', function() {
var tr = $('#tbl_id_4');
tr.children()[1].innerHTML = "NEW NAME";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" class="button" value="Click Me" />
It's also worth noting that as you're already using jQuery, you could just do this:
$('.button').on('click', function() {
$('#tbl_id_4 td:eq(1)').text("NEW NAME");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" class="button" value="Click Me" />
Related
I am trying to add class to div if the number of rows in the table is larger than 3.
This is my code.
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$this.find('.box').addClass('newclass');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
I don't see why this code not working, can somebody try to help me with this?
What I try to achieve is this:
<div class="box newclass">
Your code isn't working because this is a reference to the .box element itself. When you do a find() from there you're looking for child elements, so nothing it returned. To fix the issue just remove the find() call.
However you can make the jQuery more succinct by simply using the :has() selector to retrieve .box elements which have more than 3 tr within them:
$('.box:has(tbody > tr:eq(3))').addClass('newclass');
.newclass { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
</tbody>
</table>
</div>
you already set the $this to the selector. and by now using $this.find will try to find inside the element itself, so u can use $this directly or search the document itself $(document).find instead of $this.find >>> try the button to show classes list
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$(document).find('.box').addClass('newclass');
}
});
$('button').on('click', function() {
console.log($(document).find('.box').attr('class'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<button> show classes list </button>
I know there was a billion questions like my but I still can't find solution, and I know it's basic and fundamentals of JS but I'm new with this language.
Ok, so I have table
<table>
<tr id = 'first'>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>SomeName</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName2</td>
<td>
Up
Down
</td>
</tr>
</table>
And I need to make functionality which allows to replacing table rows under <th># . When I put row with #2 on place #1 I want to keep proper orders of rows, 1,2 etc. I have row 2 on first place in my table but with #2, I need to change it.
It looks like this:
function moveChoiceTo(elem_choice, direction) {
var tr = elem_choice.parentNode.parentNode,
td = tr.parentNode;
if (direction === -1 && tr.previousElementSibling &&
!tr.previousElementSibling.id) {
td.insertBefore(tr, tr.previousElementSibling);
} else if (direction === 1 && tr.nextElementSibling) {
td.insertBefore(tr, tr.nextElementSibling.nextElementSibling)
}
}
But I still have no idea how to make my # unchanged. I want to use for it JQ but I've tried different solutions and none of them works.
I've tried
$(tr.firstElementChild.innerHTML).before($(tr.previousElementSibling.firstElementChild.innerHTML));
$(tr.firstElementChild.innerHTML).html(tr.previousElementSibling.firstElementChild.innerHTML);
$(tr.firstElementChild.innerHTML).replaceWith($(tr.previousElementSibling.firstElementChild.innerHTML));
And some others combination but i can't figured out what is wrong. Do I pass JS variable to JQ function in wrong way?
My table should looks like:
<table>
<tr id = 'first'>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>SomeName2</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName1</td>
<td>
Up
Down
</td>
</tr>
</table>
Name, action and others rows replaced places but #id is unchanged
EDIT.
Ok, I'm the stupidest man on the earth.
This is solution I was looking for:
$(tr.firstElementChild).html(tr.previousElementSibling.firstElementChild.innerHTML++);
when I go up, and
$(tr.firstElementChild).html(tr.nextElementSibling.firstElementChild.innerHTML--);
when I go down
Get second tr using $('tr').eq(1), then get all the children of tr and then use eq(1) to get second td.
const td1 = $('tr').eq(1).children().eq(1);
const td2 = $('tr').eq(2).children().eq(1);
const temp = td1.text();
td1.text(td2.text());
td2.text(temp);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id='first'>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>SomeName</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName2</td>
<td>
Up
Down
</td>
</tr>
</table>
Here's a simple solution using a delegate listener on the table element:
myTable.addEventListener('click', function({
target: t
}) {
if (t.tagName === 'BUTTON' && ['up', 'down'].includes(t.textContent.toLowerCase())) {
let row = t.closest('tr');
switch (t.textContent.toLowerCase()) {
case 'up':
let prevRow = row.previousElementSibling;
if (prevRow) {
row.parentElement.insertBefore(row, prevRow);
}
break;
case 'down':
let nextRow = row.nextElementSibling;
if (nextRow) {
row.parentElement.insertBefore(nextRow, row);
}
break;
}
}
})
<table id="myTable">
<thead>
<tr id="first">
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>SomeName1</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName2</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>3</td>
<td>SomeName3</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>4</td>
<td>SomeName4</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>5</td>
<td>SomeName5</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>6</td>
<td>SomeName6</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
</tbody>
</table>
I was wondering if it is possible to hide and show a row in a table by clicking a button using jquery. I know the basics of hide and show.
got this to work by using toggle and giving the tr within the table an id.
Some example of what you can do with hide and show functions of jQuery:
$(document).ready(function() {
// Hide row button click
$(".hideRowsButton").click(function() {
$(this).closest("tr").hide();
});
// Show all rows button click
$("#showRowsButton").click(function() {
// Selects every hidden row of the table
$("#myTable tr:hidden").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td><button type="button" class="hideRowsButton">Hide</button></td>
</tr>
<tr>
<td>Steve</td>
<td>55</td>
<td><button type="button" class="hideRowsButton">Hide</button></td>
</tr>
</tbody>
</table>
<br/>
<button type="button" id="showRowsButton">Show all rows</button>
If you need something specific, fleel free to ask.
I'm not sure what exactly you would like to do, but if we consider for instance the following html code:
<table>
<tr>
<th>col11</th>
<th>col12</th>
<th>col13</th>
</tr>
<tr>
<td>col21</td>
<td>col22</td>
<td>col23</td>
</tr>
<tr>
<td>col31</td>
<td>col32</td>
<td>col33</td>
</tr>
</table>
then you can just write:
$("table tr:nth-child(2)").hide();
or
$("table tr:nth-child(2)").show();
where 2 is the 2nd row. You can change it accordingly:
https://jsfiddle.net/gebf2pf2/2/
I would like to write a javascript-function which changes the name of a html-th on button-click. My problem is, that I don't know how to get the "text" of the th.
document.getElementById("id").text
and
document.getElementById("id").value
don't work.
You should use innerHTML
HTML:
<table>
<thead>
<tr>
<th id="headId">Col name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Info</td>
</tr>
</tbody>
</table>
<input type="button" value="Click" onclick="getHeadName()" />
JS:
function getHeadName() {
var headName = document.getElementById("headId").innerHTML
}
Ive got a table of data and on each row the there is a button, onclick im trying to 'copy' that rows data, and 'paste' it into another div.
Here's my HTML:
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
Ive been trying to do this using:
$(function() {
$('addValues').click(function(){
var content = $('tr').html();
var newdiv = $("#selection");
newdiv.html(content);
$('#content').after(newdiv);
});
});
But cant quite get it to work, any ideas ?
Ive made a fiddle of the problem here - http://jsfiddle.net/9sZaX/2/
There are a few things wrong with your jsFiddle and/or code.
Don't use duplicate id attributes. It will cause unexpected results because jQuery will only select the first one found (which is expected, since there should only be one element with that id). Instead, give the <button>s a class attribute, like "addValues", and use this selector: $(".addValues").
Also, try setting the jsFiddle to actually use jQuery (set up on the left side of the page).
Another important problem was the fact that there is no element with the id of "content" on the page, so the .after() wasn't really doing anything.
Here's how I would set it up, depending on your actual requirements:
HTML -
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
JS -
$(function () {
$(".addValues").click(function () {
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
targetArea.append(myRow.children().not(myCol).text() + "<br />");
});
});
DEMO: http://jsfiddle.net/RPd3v/2/