I have a Datatable with information, and a fieldset with a table full of text inputs. The user should be able to add new rows according to the information values, but these rows are not correctly adding. Clearly the tr is being cloned and added (emptied where needed), the corresponding values are appending but the pagination is not being updated for Datatables. I cannot figure out how to correctly use .fnAddData() to get the job done here. On top of that, I don't know how to go about the "Permissions" column - getting checkboxes to convert to text for the table. Any ideas? Thanks in advance.
http://jsfiddle.net/BWCBX/28/
jQuery
$('#addRow').click(function () {
var tbody = $('#example tbody');
var tr = tbody.find('tr:first').clone();
tr.find('td:first').text($(".engine").val());
tr.find('td:eq(1)').empty();
tr.find('td:eq(2)').empty();
tr.find('td:eq(3)').text($(".version").val());
tr.find('td:eq(4)').empty();
tr.appendTo(tbody);
});
There are good examples on how to use fnAddData in the API docs.
I have rewritten your JS according to example provided in docs. I've extracted checkboxes checking into separate function to mantain high readability. The updated fiddle is here.
Related
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.
I'm using jQuery DataTables and want to copy all rows (save in JavaScript array) upon clicking the header checkbox.
I want to find where jQuery DataTables store the HTML for remaining page of rows, so I can navigate through JavaScript then check it there or set property checked to true.
Something like this one.
Other information:
I use data from an ajax source(serverside:false), all data is returned.
When I click page 1, all the rows remain Checked.
SOLUTION
There are many methods that could be used for that purpose. You can use rows().data() to get the data for the selected rows.
Example:
var table = $('#example').DataTable();
var data = table
.rows()
.data();
alert( 'The table has ' + data.length + ' records' );
DEMO
See this jsFiddle for code and demonstration.
I find the generated element by jQuery DataTables using this code, and I can copy the whole tr element that hides when paging the DataTables.
$('#example').DataTable().rows().iterator('row', function(context, index){
var node = $(this.row(index).node());
//node.context is element of tr generated by jQuery DataTables.
});
If you do this:
$('#table').DataTable().rows().data();
you get a lot of unnecessary data.
If you just want the table data you can do this:
$('#table').DataTable().rows().data().toArray();
Using
tableObject.rows().data()
will return all the data from the table.
Set the pageLength:
$('#example').dataTable( {
"pageLength": 50
} );
I'm working on creating a javascript based spreadsheet application. Right now I can dynamically create the spreadsheet as a table with a supplied number of rows and columns and a text input in each cell as can be seen in this picture.
I'd like to have a generic event tied to all of the inputs in the table in which I am able to determine the row index and column index of the input that fired the event. Something like this:
$('.spreadsheet-cell').click(function () {
var rowIndex = $(this).attr('rowIndex');
var columnIndex = $(this).attr('columnIndex');
});
I originally tried implementing things by dynamically adding row and column index attributes to the html input element when I create it but when I add rows or columns after the original spreadsheet has been created things get messy trying to shift the value of these attributes around. I think I could make that method work if it came down to it but it seems messy and I'd prefer not to mess around so much with the DOM when I figure that there is probably some way using jQuery to determine the relative index of the parent <td> and <tr>.
Use jQuery .index. Within your function:
var rowIndex = $("#table tr").index($(this).closest('tr'));
var colIndex = $("#table td").index(this);
I am using PicNet TableFilter for my Table:
-http://www.picnet.com.au/picnet_table_filter.html
Example:
http://www.picnet.com.au/resources/tablefilter/demo.htm
Now I need a dynamic Totals Row, which sums specific columns.
I found a script here:
"Use jQuery to add all the values in a table column"
http://naspinski.net/post/Use-jQuery-to-add-all-the-values-in-a-table-column_.aspx
I have implemented this script and I get the sum of columns, which I want. It works.
But if I use the PicNet- filter and filter the table, the "Total Row" does not change its values. They seem to be static.
I think the PicNet Script is too difficult to understand and edit.
The target is to get a Total Column Row, which changes dynamically depending on the filter usage.
I hope you can help me or have an idea for any alternative.
Thank you for every answer.
Try calling your "summing" code in this TableFilter function: filteredRows: function(filterStates) { call_SumCol(); } See the TableFilter documentation.
I have a table that is dynamically built using DOM. It has 10 cols, and on each row i have some data that i get from a websocket, text boxes and a submit button to add each row to the database.
How can i remove a row after i submitted it?
Someone mentioned jQuery but can't figure it out how to do that.
EDIT
I'm using Chrome and had problems with all the scripts below. this is how i resolved it:
instead of $('input') I used jQuery('input') all the scripts are working fine.
thank you for your help.
Try something like this...
$('input').click(function() {
$(this).closest('td').remove();
});
Demo: http://jsfiddle.net/wdm954/32W63/
EDIT:
Here is another way to do this...
$('table form').submit(function() {
// run some ajax here to do your database work
$(this).closest('td').remove();
});
You can do like this:
$(document).ready(function(){
//Assuming all your submit buttons have the same class
$(".submit").live("click", function(e){
var buttonHnd = $(this);
$.post("your-php-file.php",
{/* the data you want to post e.g. */ name: $("#name").val()},
function(data){
buttonHnd.parent().parent().remove();
}
);
});
});
var myTableRow = ... // Find the row however you like
myTableRow.parentNode.removeChild(myTableRow);
You might also be interested in my AJAXFetch jQuery plug-in. Among other things, it lets you treat a row of a table as a form and submit all the form elements in it using AJAX, swapping it out the row with the result from the server (usually the non-form version). I use it in many of my internal applications for in-place editing of data.
You could try something like:
// Simple bottom row removal
$('#myTable tr:last').remove();
// Removing n'th (ex. 3rd) row from the table
$('#myTable tr:eq(2)').remove();
Source: JQuery HowTo
you can use jquery' remove to remove it from dom...
http://api.jquery.com/remove/