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/
Related
When a cell is clicked the function is suppose to run.
Right now it is working only on the first row.
When i click on the button on a row i want that specific row to affect.
$(document).ready(function() {
function loadHistory() {
$('#btn').data('valType', 'more');
$('#btn').click(function() {
var id = $('#btn').data("valType")
})
}
})
In this case, use class selector, instead of id.
For example, yo have any list:
$(document).ready(function() {
$('.delete').click(function(e) {
$(this).parent().parent().remove();
})
})
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Chair
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Sofa
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Table
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Without the HTML code it is a bit more difficult to answer you, but I try.
Usually the ID is unique, so it's assigned to only one element, so try using the class selector.
Then another thing, I don't know if this is your case, if you go to create the other lines dynamically, the jQuery .click () function will not be able to manage the clicks on the elements created after loading the page. In this case use $.on('click', '.yourClass', function).
I hope I was helpful!
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" />
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 need your help! This is an example of my table code:
<table id='tableName'>
<tbody id='tbody1'>
<tr>
<td>
<input.../>
<input.../>
</td>
</tr>
</tbody>
<tbody id='tbody2'>
<tr>
<td>
<input.../>
<input.../>
</td>
</tr>
</tbody>
</table>
How can I disable all inputs in tbody2?
for jquery 1.6+:
$("#tbody2 input").prop('disabled', true);
Working Demo
for jquery 1.5 and below :
$("input").attr('disabled','disabled');
If you want to do this with pure html and no javascript libraries, add the 'disabled' attribute to your inputs, like this:
<table id='tableName'>
<tbody id='tbody1'>
<tr>
<td>
<input.../>
<input.../>
</td>
</tr>
</tbody>
<tbody id='tbody2'>
<tr>
<td>
<input... disabled />
<input... disabled />
</td>
</tr>
</tbody>
</table>
You could also set the to readonly, if you like:
http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1
For JavaScript
var body2Inputs = document.getElementById('body2').getElementsByTagName('INPUT');
for(var i = 0 ; i < body2Inputs.length; i++)
body2Inputs[i].disabled = true;
You Must Know things in JavaScript just in case you don't need to use Libraries like jQuery
I have a table that looks something like this:
<asp:Repeater ID="myRepeater" runat="server">
<div id="divTable" class="divTable">
<table id="myTable">
<thead>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
</thead>
<tbody id="myContent">
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td id="findMe">
<%#Eval("IsFlagged")%>
</td>
</tr>
</tbody>
</asp:Repeater>
</table>
</div>
Now, here's what I'm trying to do. If <%#Eval("IsFlagged")%> returns anything at all, i'd like to make all the cells in the table row a certain color.
I've been reading about .contains(), but I haven't found an example that simply asks "if not null, apply a .css style to the rest of the cells of the table row".
I put together an example in jsfiddle: http://jsfiddle.net/aMR5r/
Edit: Your edit makes the code a little simpler, but it's the same principle.
$(function(){
var isFlagged = $('#findMe').text();
if(isFlagged.length > 0)
{
$('#findMe').parent().addClass('yellow');
}
});
http://jsfiddle.net/aMR5r/1/
First, try to give that specific td a class or someting so you can target it. Then you can check the length of $('td.yourclassname').html();
If you are using VB.Net then you can use this code..
<tr style="background-color:<%# IIF(IsDBNull(Eval("IsFlagged"),"none","yellow") %>">
you can apply this logic to TD also.