I have table containing 4 main rows and one (expand or collapse) button.On click of (expand or collapse) button i want to insert one more row in middle of all rows(which result in total 8 rows) by iterating the table rows.How to do this using Javascript?See the image below.Any suggestion.
This is the code i have return on click of Expand or Collapse button,
jQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i) {
//what code need to add here
});
});
Due to the fact, that you haven't provided a code example, I only can suggest one way to achieve this.
You can determine the row above the row you'll want to insert by an id on the tr or by a css selector like :nth-of-type(4) for example.
After that, you can use this row as jquery element (example: $("tr#yourrow")) and append a row after it using append().
Example: $("tr#yourrow").append("<tr>... your row definition ...</tr>")
Based on the updated question:
jQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr>... your row definition ...</tr>")
});
});
The row definition should be done by yourself. I don't know the logic behind the iteration in your case. But I think you'll get it. :)
Related
How to tell to jQuery tabledit that the rows are changed? The buttons only generated for existing rows, when I add a new row (for example using jQuery), the table buttons doesn’t appear in the new row. I saw in tabledit code, that there is possibility to switch between view and edit mode (maybe this would help me), but don’t know how to access these methods after the tabledit is created and when rows has been changed.
A little snippet from my code:
$(document).ready(function(){
$(‘#btn’).click(function(){ ... adding row, I need to update tabledit here });
$(‘#table’).Tabledit(...parameters...); }
});
tabledit
Here is the best solution I could come up with for your situation.
I created an "Add" button. NOTE the for-table attribute so I can figure out what table to add to later.
<button id='add' for-table='#example1'>Add Row</button>
Then I created a click handler for the "Add" button.
$("#add").click(function(e){
var table = $(this).attr('for-table'); //get the target table selector
var $tr = $(table + ">tbody>tr:last-child").clone(true, true); //clone the last row
var nextID = parseInt($tr.find("input.tabledit-identifier").val()) + 1; //get the ID and add one.
$tr.find("input.tabledit-identifier").val(nextID); //set the row identifier
$tr.find("span.tabledit-identifier").text(nextID); //set the row identifier
$(table + ">tbody").append($tr); //add the row to the table
$tr.find(".tabledit-edit-button").click(); //pretend to click the edit button
$tr.find("input:not([type=hidden]), select").val(""); //wipe out the inputs.
});
Essentially;
Deep Clone the last row of the table. (copies the data and attached events)
Determine and set the row identifier.
Append the new row.
Automatically click the Edit button.
Clear all inputs and selects.
In my limited testing this technique appears to work.
jQuery Tabledit should be executed every time a table is reloaded. See answer given here:
refreshing Tabledit after pagination
This means that every time you reload the table (e.g. navigating to new page, refreshing etc), you must initialize Tabledit on the page of the table where it wasn't initialized. The problem is that there is no way to know whether Tabledit has been initialized on the table already, hence if you re-initialize it, duplicate buttons (edit, delete..) will be added to the rows of the table. You also cannot destroy a non-existent Tabledit, hence calling 'destroy' always beforehand will not help.
I hence created my own function to tell me if Tabledit is initialized on a certain page of a table or not:
function hasTabledit($table) {
return $('tbody tr:first td:last > div', $table).hasClass("tabledit-toolbar");
}
and using it as follows:
if( !hasTabledit($('#table')) ) {
$('#table').Tabledit({
url: 'example.php',
columns: {
identifier: [0, 'id'],
editable: [[1, 'points'], [2, 'notes']]
},
editButton: true,
deleteButton: false
});
}
The hasTabledit(..) function checks whether the last cell of the first row of the table has a div which has the tabledit-toolbar class, since this is the div that holds the Tabledit buttons. You may improve it as you like. This is not the perfect solution but it is the best I could do.
How can I reach the first row and the first column (using javaScript) from a table in specific URL?
for example in the following URL:
https://www.w3schools.com/jsref/dom_obj_table.asp
In 'Table Object Methods', I want to get "createCaption()" .
Thanks!
you can try this...
you get value into rows of table HTML.
var row = document.getElementById("myTable").rows[0].innerHTML;
Using css you can do
var elem = element.all(by.css('table tr:nth-child(2) td:nth-child(1)').last();
This selects the first column from the second row that is in a table.
Using element.all because there are 3 tables it could apply to, which is why you need the .last() because the table you wanted referenced was the last table. Would work better if the table has an unique ID to reference it with.
How to get row value of a table on mouse click? Data in this table is populated from the data returned using AJAX.
Below is the code which is not working:
$('table#tblBdy tbody tr').click(function() {
$('tr').click(function () {
var tableData = $(this).closest("tr").children("td").map(function() {
return $(this).text();
}).get();
$('#bx1txt').val($.trim(tableData[0]));
$('#bx2txt').val($.trim(tableData[1]));
$('#oldqty').val($.trim(tableData[1]));
});
I'm not sure I completely follow your question, your title and descriptions seem to conflict. Are you looking to get the value you a specific cell on click? Your question says you want the value of a row...
If I understand it correctly, you either want the value of a specific cell when it is clicked, or you want to highlight the row of that cell that you are clicking.
I have setup a codepen http://codepen.io/anon/pen/oXNeMx with a simple solution.
Depending on how the table is generated, you can put that javascript code into it's own function and call that function whenever you have new AJAX data so that the click handler gets bound to the table and elements.
//handles table cell click events
$('td').click(function(){
//updates the value
var cellValue = $(this).html();
//find the row of table where cell was clicked
var tr = $(this).closest('tr');
//removes select class from all rows
$(tr).siblings().removeClass('highlight');
//adds class to highlight selected row
tr.addClass('highlight');
});
The reason your code is not working is because you attach an event handler to some elements, but then you replace those elements with new ones from the AJAX call.
You need to set an event handler on an element that will not change, for example, the table (if you table gets replaced in its entirely, you need to find a higher ancestor that never changes).
// ancestor event real selector
$('#tblBdy').on('click', 'tbody td', function() {
// Same code as yours in the handlers
});
I have logic for cells in a row to be highlighted when the first cell text is clicked working just fine. When the page loads however, I want to default the first row to be highlighted as the first row is displaying some other data based on it's id.
What works when the first cell text (id) is clicked is:
$("#simHeaderTable").find("tr").each(function () {
var tdID = $(this).find("td:first-child").text();
if (tdID == ID)
$(this).children("td").css("background-color", "#FFFF66");
else
$(this).children("td").removeAttr("style");
});
So my logic was that this finds all rows and loops over them. I checked the first cell in each row and if the cells text is equal to some id I "highlight" it with some css. I unhighlight all the others.
So now inside document ready to highlight the first row on page load I figured I would just do the following, which doesn't result in anything getting highlighted.
$("#simHeaderTable").find("tr:first-child").children("td").css("background-color", "#FFFF66");
To me, this finds the first tr/row and then finds all children that are cells/td and applies the css to set the background color to yellow. Any idea why this isn't working?
Your statement is much more complex than needed, instead of:
$("#simHeaderTable").find("tr:first-child").children("td").css("background-color", "#FFFF66");
try:
$("#simHeaderTable tr:first-child > td").css("background-color", "#FFFF66");
You can even leave out the '>' unless you have nested tables.
Usually, you only use .find() when you have a cached selector like:
var cached_obj = $('#something');
// lots of code
var cached_obj.find('.something_else');
There is a one table where user can select multiple rows, and below to the table there is two buttons moveup and move down. when user will click on movebutton, rows should go move up, similar to movedown.
Below is my Jquery code
$(".moveUp").live("click", function(){
var row = $(".selectRow")
$(row).each(function() {
row.insertBefore(row.prev());
});
});
But it is behaving very wrong. Please help me. I am new in jquery.
Thanks!
You need to try like this
$(".moveUp").on("click", function() {
var row = $(".selectRow");
row.each(function() {
var $this=$(this);
$this.insertBefore($this.prev());
});
});
there is no need to wrap row using $( ) again
An alternate approach is to manipulate an array of pure data (store row and selected state), then trigger a 'render' function on the data after it is changed. IOW, redraw the entire table on each operation. Typically this is fast, and an advantage is you can separate the logic/data from the visual interface (like MVC style).