I've been editing someone else's code for a project, and I stumble every now and then when trying to figure how certain Javascript functions are doing their thing.
Essentially I want to add a remove row button, however it's causing headaches.
So the text for the dynamically generated row is done by this PHP variable:
$rowtext .= '<tr>something</tr>';
and then the function to generate the row in Javascript:
function generateRow(x) {';
var row_prototype = \'' . $rowtext . '\';
return row_prototype.replace(/\[index\]/g, x);
}
When the add row button is clicked it performs this action:
rowIndex = 1;
function addRow() {
var nr = generateRow(rowIndex);
rowIndex = rowIndex + 1;
jQuery(\'tbody\').append(nr);';
}
I'd presume I'd need to do a similar function to be performed on click, taking into account the rowIndex etc.
Anyone have any ideas?
Essentially it's to remove the last row that has been generated by the above code... so remove row rowIndex == 5 or something
Since you mentioned last row in the comments you can use :last selector to get the last row, Try something like below,
$('#removeRow').click(function () {
$('#table_selector tbody tr:last').remove();
});
And a button like below somewhere in your markup,
<button id="removeRow">Remove a Row</button>
Note: you need to revise #table_selector tbody with specific table ID/Class.
Related
I'm using datatables plugin to create a datatable. I've put a button to add new rows. The new inserted row can be anywhere depends on which column the table is sorted by. I need to set an event to the button inside the row once it is inserted. So I have to get the last inserted row to do so. But I can't find a way. I've tried below but it's not working. index() does not returning exact index where the row really is.
var row = table.row.add({...});
row.draw();
var tr = $('#datatable tbody tr').get(row.index());
Please help. Your answer is kindly appreciated and thank you in advance.
Take length of table and -1 and that number is the index of last
tr
var lastRowIndex = $('#datatable tr').length -1;
New rows will be appended onto the end of the row list, so you can do something like this
table.row(table.rows().count()-1)
See fiddle here.
Can't find a way to this using any plugin's provided function. But thank God there's a workaround.
Flag the inserted row in column rendering function. For example, I append a tag
datatable = $('#datatable').DataTable({columns : [{render : function(){... <last/> ...}}]});
On inserting new row, insert it with a data that indicate the flag inclusion. Get the row by the flag. And then remove the flag.
datatable.row.add({...}).draw();
var row = $('last').parents('tr');
$('last').remove();
For any other case which don't need to edit the <tr> explicitly, get the index of last inserted row. Get the datatable row and update the data. Set column render function to render the updated row accordingly.
var i = datatable.rows().count() - 1;
var data = datatable.row(i).data();
datatable.row(i).data(changeSomething(data)).draw();
And to remove the row
datatable.row(i).remove().draw();
I am working on a permissions page on my site and currently have it sets up with three columns Username Permissions and Action. When I press the Edit button in the Action column I want to be able to edit the Permissions column only in that specific row. Right now I have it setting both the Username and Permissions cell to be contenteditable.
Here is is my definition of my table (data being pulled from DB):
echo "<td class='username'>" . $row['username'] . "</td>";
echo "<td class='permissions'>" . $row['isAdmin'] . "</td>";
echo "<td><input type='button' class='btn btn-primary edit' value='Edit'></td>"
And Here is the script I am currently using to change each column in the row:
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function () {
return $(this).find('.edit').length === 0;
});
//console.log(tds);
if ($this.val() === 'Edit') {
$this.val('Save');
if($this.id !== '.edit') {
tds.prop('contenteditable', true);
}
}
I need it to only select the <td class='permissions'> in the current row that the button was clicked on.
What is the proper way to select only that cell in the corresponding row?
I've tried multiple ways to try and only select it from tds based on the class but have had no success.
Instead of using the rather complicated construction
var tds = $this.closest('tr').find('td').filter(function () {
return $(this).find('.edit').length === 0;
});
you could simply do
var tds = $(this).closest('tr').find('td.permissions');
to identify the target element to make editable. I assume that this code is part of the 'click'-event function for the "edit" button..
I have made a fully editable HTML Table using DataTables and some custom code. I can't share the whole code though, as it is a closed-source project for work, but I think it will be helpfull.
Take a look at my repo
Some useful notes:
1) I used Mutation Observer Api to track changes in cell values. I stored every changed cell in an array and on clicking 'Save' the array gets sent with AJAX to the back-end.
2) There is a HTML attribute called contenteditable. It lets you edit, well, the content of an element. Use that to edit the cells' values before appending them to the array. Attach an event listener to the 'Edit' button and when it is clicked, add this attribute to all the 'td' elements of your table.
3) You just send the array with values to the back-end and run some simple queries to your database.
Hope it helps you.
Here is the scenario:
User clicks on a button and can add new row in table.
Select a value from any of the row and few fields will be added in only that row. It works fine.
But problem is here: When user again selects any different rows it append the cells in rows, but I want to delete the previous cells and add new selected cells. I am not able to do that.
I tried with deleteCell() but did not find required solution. here is the whole code. If any one could help please.
Another problem with code is when I run it the first time it does not count first row number.
for (i = 0; i < selectedvalue; i++) {
var x = Row.insertCell(-1);
x.innerHTML = "<td><select><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option></select></td> </tr>";
}
Try this:
http://codepen.io/anon/pen/yeZrov?editors=1010
jQuery('#myTable tr').eq(rownum).find("td:gt(3)").remove();
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. :)
I have two HTML tables; a source address table and a destination address table where I want to shift rows from the source table to the destination table, and vice-versa.
It is mostly working, but I am getting stuck when inserting a row into the destination table from the source table. I do not want to append a row, as the last row in the destination table supports a text field where the user can type in an address manually. Below is the handler function for when a user clicks on a row in the source address table to remove and shift that row into the destination table:
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//The below line of code has been removed because I don't want to add my row to the end of the table.
//$("#destination_christmas_lights_addresses tbody").append(tr);
//Below here is new code added to insert a row
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
//Insert a row into the destination table before the end of route address.
var newRow = tableRef.insertRow(tableRef.rows.length -1);
//Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
newCell.innerHTML = "I want inner HTML from variable tr here";
});
PROBLEM 1
When I use the append function (commented out) it all works fine, except the row is at the bottom of the table which I do not want.
When I use the insertRow function, I can not work out how to move the appropriate elements of the tr variable to create a new row. I need the innerHTML because it includes code to enable the shifting of the row back into the source table.
Somebody please help?
PROBLEM 2 I am sure that the following line of code can written differently.
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
I thought I could use:
var tableRef = $("#destination_christmas_lights_addresses tbody");
but I can't get this to work.
Any help is appreciated.
Thanks for peoples responses. Final solution which solves both my problems is as follows.
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//reference id of element representing the row I want to add the address before.
$("#trip_planner_end_address_row").before(tr);
});
Try this
var $WhereToAppend=('#destination_christmas_lights_addresses').find('tr:first');
($tr).insertBefore($WhereToAppend);
Maybe the problem is "remove method and the clone", you should save the cloned tr in a variable for then remove the original tr.
Like this:
var tr_original = $(this).closest("#source_christmas_lights_addresses tbody tr");
var tr_cloned = tr_original.clone();
tr_original.remove();
I would like see your original sample code, so it would be easy to understand the real trouble ;)
Good luck !