I had a table inside a loop, and I want to add a row to the table by clicking a button "add row". Here is my code
HTML:
<div id="popUp" style="display: none">
<input type="button" value="Cancel" onclick="closePopup()">
<input type="button" value="ADD" onclick="addRow(this)"/>
</div>
#for (int i = 0; i < 3; i++) {
<table id="table #i" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
<tr><td colspan="3"><input type="button" class="addRow" onclick="addRow(this)" value="ADD ROW"/></td></tr>
</tfoot>
</table>
}
then in javascript i wrote function:
function addRow(table) {
$(table).find('tbody tr:last').clone().appendTo(table);
}
but it does not add a row. If I use the function without parameter "table", the new row will be added to all tables inside a loop.
My desired outcome is: When the user clicks the button a new row will be added only in the one table, not to all.
onclick="addRow(this)" on a td. this will represent the surrent td. Not the table. You may pass the id or some selector of the table or find the parent table in with your script.
You can use parents() to find the parent table.
function addRow(td) {
var table = $(td).parents('table');
var cloned = table.find('tbody tr:last').clone();
table.find('tbody').append(cloned);
}
And also if you want all the events to work then use clone(true). Else you have to bind the events to the tr.
You need to use closest to find its parent table first:
function addRow(table) {
$(table).closest('table')//find parent table
.find('tbody tr:last')//find last tr of the table
.clone()//clone it
.appendTo($(table).closest('table').find('tbody'));//append it to tbody
//append to 'tbody' not this row
}
As per your updated question, here you go:
function addRow(table) {
$(table).parent()//find parent div
.next()//get the table
.find('tbody tr:last')//find last tr of the table
.clone()//clone it
.appendTo($(table).parent().next().find('tbody'));//append it to tbody
//append to 'tbody' not this row
}
Related
I have a htmltable that is dynamically created. I have made the rows clickable.
I need to pass the row innertext id to the script that fires when the row is clicked.
htmltable:
<table style="width:100%;">
<tr>
<th>id</th>
<th>name</th>
<th>other info</th>
</tr>
<tr>
<td class='table_row_click'>11</td>
<td class='table_row_click'>item 2</td>
<td class='table_row_click'>lmfao</td>
</tr>
<tr>
<td class='table_row_click'>22</td>
<td class='table_row_click'>item 2</td>
<td class='table_row_click'>lol</td>
</tr>
</table>
Click event:
$(document).ready(function ($) {
$(".table_row_click").click(function (e) {
//I need to use the clicked row ID here for something
});
});
$(e.target).closest('tr').find('td').first().text();
You can navigate up to the parent tr, find the td elemements, get the first one, and get its text.
Using closest('tr') will work if the class is on the td or tr level, as closest() can match on itself.
I want to select a value of my table by row and column position as below description.
This tables was used by appendTo method to .tbody selector and then I've got more rows as below I just show two of rows and each of rows I have .Open selector was used for user click to get a value on column number 4 by current position or index of that row.
Here HTML:
<table class"mytable">
<tbody class="tbody">
<tr>
<td>1</td>
<td>THB-PP-000001</td>
<td>1005-000001</td>
<td>100</td> //this is the column id I want to get it
<td><button type="button" class="open"> Open by Id </button></td>
</tr>
<tr>
<td>1</td>
<td>THB-PP-000001</td>
<td>1005-000001</td>
<td>101</td> //this is the column id I want to get it
<td><button type="button" class="open"> Open by Id </button></td>
</tr>
</tbody>
</table>
This is JS:
$(document).on("click", ".open", function () {
var inde = $("table tbody tr td:nth-child(4)").text();
console.log(inde);
});
Thank for help
Try to use .parent() along with .prev() to get your required data,
$(document).on("click", ".open", function () {
var inde = $(this).parent("td").prev().text();
console.log(inde);
});
If your html is having a tbody as a static node then you could use .tbody in the place of document.
The idea is to move a particular table row to a different location
HTML
<table id="grid1" class="table table-zebra">
<tbody>
<tr>
<td>Cont 1 tr 1</td>
</tr>
<tr>
<td>Cont 2 tr 2</td>
</tr>
<tr>
<td>Cont 3 tr 3</td>
</tr>
<tr>
<td>Cont 4 tr 4</td>
</tr>
<tr>
<td>Cont 5 tr 5</td>
</tr>
<tr>
<td>Cont 6 tr 6</td>
</tr>
<tr>
<td>Cont 6 tr 6</td>
</tr>
<tr>
<td>Cont 7 tr 7</td>
</tr>
<tr>
<td>Cont 8 tr 8</td>
</tr>
<tr>
<td>Cont 9 tr 9</td>
</tr>
<tr>
<td>Cont 10 tr 10</td>
</tr>
<tr>
<td>Cont 11 tr 11</td>
</tr>
<tr>
<td>Cont 12 tr 12</td>
</tr>
<tr>
<td>Cont 13 tr 13</td>
</tr>
<tr>
<td>Cont 14 tr 14</td>
</tr>
</tbody>
</table>
That is the basic table, now, how do I can I move the TR 11 in a away that it will be under TR 4, I'm sorry that I don't post any JS but I have no idea how to do it... I was looking at this JSbin which is nice but can't use it..
Move the 11th tr to under the 4th:
$("tbody tr:nth-child(11)").insertAfter("tbody tr:nth-child(4)");
Working demo
If you prefer vanilla, you need the selectors the other way around.
document.querySelector("tbody tr:nth-child(4)").insertAdjacentElement("afterend", document.querySelector("tbody tr:nth-child(11)"));
In the context of an HTML table with rows that look like this:
<tr class="form-grid-view-row">
<td>
<a class="up" href="#">⇑</a>
</td>
<td>
<a class="down" href="#">⇓</a>
</td>
<td>
<span id="index1" class="form-label">1</span>
</td>
<td>
<span id="span1" class="form-label">Value 1</span>
</td>
</tr>
And this script:
$('.up,.down').click(function () {
var row = $(this).parents('tr:first');
if ($(this).is('.up')) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
$('.up,.down').click(function () {
This is selecting every DOM element with the class "up" and every element with the class "down", e.g. $('.up,.down').click(function () {. The function sets up a click handler for each element.
var row = $(this).parents('tr:first');
$(this) refers to the DOM element which is the target of the click handler (one of the "up" or "down" elements which was selected above). .parents() looks for tr:first, the first <tr> element starting with <a> and travelling up the DOM. It'll end up selecting the entire row.
if ($(this).is('.up')) {
This is checking to see whether or not the element selected has the class "up" or not.
row.insertBefore(row.prev());
This takes the row that was clicked, and moves it right above the upper-most sibling of the row that was clicked.
The jQuery methods used (insertBefore, prev, is, parents, etc.) are described in greater detail in the jQuery documentation.
You can do it by using JQuery Library.
// selecting tbody is bad instead you need to give an id or class to this tag and select according to this
var fourth = $( "tbody tr:nth-child(4)" ),
eleventh = $( "tbody tr:nth-child(11)" );
$( "tbody tr:nth-child(11)" ).insertAfter(fourth);
In order to move dynamically your elements you can add an event to all tbody children. What I basically do is select one element on first click then I move it after second element clicked.
$(document).on("ready", function () {
var $tbody = $("#grid");
var selected = null;
$tbody.children().on("click", function () {
if (selected == null)
selected = this;
else
{
$(selected).insertAfter(this);
selected = null;
}
});
});
It move after an element but is just an idea, you can customize it.
Your html should be like this.
<table>
<tbody id="grid">
<tr> <td> 1 </td> </tr>
<tr> <td> 2 </td> </tr>
<tr> <td> 3 </td> </tr>
<tr> <td> 4 </td> </tr>
</tbody>
</table>
Here is the code I want to process using javascript / jquery
EDITED THE BELOW CODE BLOCK FOLLOWING THE COMMENTS
<table>
<tbody>
<tr class="promote">
<td>1</td>
<td><span class="team_logo visible-lg visible-sm" style=""></span><a class="team_name " href="/team/show/7473/Power-Hiters">Power Hiters</a><span class="online" title="user is online"></span></td>
<td style="text-align:center">5</td>
<td style="text-align:center">10</td>
<td style="text-align:center">5</td>
<td style="text-align:center">0</td>
<td style="text-align:center">0</td>
<td style="text-align:center">6.713</td>
</tr>
<tr> <!-- Similar Above tr Content --> </tr>
<tr> <!-- Similar Above tr Content --> </tr>
<tr> <!-- Similar Above tr Content --> </tr>
</tbody>
</table>
I want to get the inner content/html of each <td> tag in a array using javascript / jquery
Extra Info:
When I tried it seems jquery strips the td and tr tags.
Actual thing I want to do is extract td in a multi dimensional array for each tr
the table structure:
<table>
<tbody>
<tr> <!-- Above tr Content --> </tr>
<tr> <!-- Above tr Content --> </tr>
<tr> <!-- Above tr Content --> </tr>
</tbody>
</table>
Since you want a multidimensional array, you will need to:
Make an array that will hold all table data
Iterate through all tr and create an array per row
Push that array in the first one, that holds all table data.
something like this:
var tableContent = [];
$('table tr').each(function(){
var trcontent = [];
$('td', this).each(function(){ trcontent.push($(this).text()); });
tableContent.push(trcontent);
})
console.log(tableContent);
example in jsfiddle
Try,
var arr = $("#cache").find('td').map(function(){ return this.textContent; }).get();
here i am trying to fetch values of a particular column for a selected row via jquery.In Following code i have two rows which do not have any id.I tried following way and getting both rows value for that column appending each other.how to get value for that row only using jquery only.I want to call test function on click of that element, dont want to use http://jsfiddle.net/SSS83/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
function test(){
var id = $(".use-address").closest("tr").find('td:eq(2)').text();
alert(id);
}
</script>
</head>
<body>
<table id="choose-address-table" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nr"><span>50</span>
</td>
<td>Some Street 1</td>
<td>Glas</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" onclick="test();">Use</button>
</td>
</tr>
<tr>
<td class="nr"><span>30</span>
</td>
<td>Some Street 2</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" onclick="test();">Use</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Not sure why you don't want to use jQuery Click event!!
Any way, if you want to stick with your test function, you need to tell the function from where it got called.
so change the
<button type="button" class="use-address" onclick="test();">Use</button>
to
<button type="button" class="use-address" onclick="test(this);">Use</button>
And update your test function as
function test(el) {
var id = $(el).closest("tr").find('td:eq(2)').text();
alert(id);
}
Enjoy!!
If you change your mind you can use the following code
jQuery('document').ready(function() {
jQuery('.use-address').on('click',function() {
var id = $(this).closest("tr").find('td:eq(2)').text();
alert(id);
})
});
Based on a click of a TD:
$('td').on('click',function() {
//get the column of the TD
var myCol = $(this).index();
//loop through the rows of this table, get the TD in the same column
$(this).parent('table').find('tr').each(function() {
var colValue = $(this).find('td').eq(myIndex).html()
}
})
"colValue" in the loop will grab the contents of the TD at that position.