Restrict adding multiple blank rows in tabulator - javascript

I am using tabulator in Angular.I wanted to add new blank row on a button click,
so I am adding a new row by using this.table.addRow({});
But every time I click on button, its adding blank row. But I don't want multiple blank rows to be added in Table.
Can I prohibit adding blank row if already one blank row is added?
How I can find out number of blank rows in table ?

Tabulator itself has no concept of a "blank row" all, rows are just objects and the table will visualize the data contained in those objects.
But you could use the searchRows function with a custom filter to retrieve the empty rows and check this before triggering the addRow function:
var emptyRowCount = table.searchRows((data) => { return Object.keys(data).length }).length

Related

Copying the row of table in react

Hi I have a reqirement in react. I need to copy the row of table in UI. means once user clicks on the highlighted icon in yellow in below image. the same row should be duplicated .
Could you guide me , how can I approach for the same?
so the below row should appear twice.
If you have the object that represents the row then just push the same into the array that consists of all this rows
array.push(clickedrow);
And let this array be a state so when you change it will rerender and you can see the updated list on UI.

Modifying row index javascript

I have a table that is able to sort the columns and it is working fine.
The rows in the table consists of parent and child rows which when click on the parent row will show the child rows. Otherwise the child rows will remain hidden.
I intend to sort the rows based on the parent rows but not the child rows result or else the table will be a mess. I try to use jQuery to remove all the child rows before sorting and append them after the sorting function but the sorting function for the column wont work for the second time. This could be the row indexes had messed up. I suspect this happened because when I remove and store child rows in a variable, the row indexes still remain. So when I re-insert the child rows based on the parent rows, the row indexes of those child rows will remain same.
Is there anyway to explicitly modify the row index of the rows without swapping their positions?
Tried to use jQuery in such way as:
$('tr.child-row')[0].rowIndex = 3
But it just wont work.
You can change the order of two rows in a table.
http://jsfiddle.net/4v2owx37/2
This is a simple code that changes order of two rows.
function swap_position(first_index, second_index){
if(second_index > first_index){
$("tr").eq(first_index).insertBefore($("tr").eq(second_index));
$("tr").eq(second_index).insertBefore($("tr").eq(first_index));
}
else if(first_index > second_index){
$("tr").eq(second_index).insertBefore($("tr").eq(first_index));
$("tr").eq(first_index).insertBefore($("tr").eq(second_index));
}
}
swap_position(1,4);
swap_position(5,3);

Angular JS add row to ng-repeat table with different controls than other rows

I have a table populated with json data and an ng-repeat, as in
I need to add rows to the top with a button, as in the screenshot, but the added row(s) has to have editable cells where I have blank rows. The data in the existing rows cannot be editable.
I am adding the row with an ng-click handler on the "add" button on the page:
$scope.addRow = function () {
$scope.hsCodes.unshift({});
};
This works, but of course adds a row just like the others, with empty TDs.
How can I add input (text) controls only to the added row(s)?
It would be helpful to have a demo to more accurately answer, but generally what I would do is:
Add a boolean property to the row object such as isEditable.
Set a template for the cell using ng-if="row.isEditable"
If the row.isEditable property is not there, that would be false, so you don't have to worry about adding it if you are dealing with remote data.

Extract a row from table

I am trying to extract a specific row of data from a table in a live webpage using the following code.
requestCrossDomain('https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&email=skip#larc.nasa.gov&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16', function(results) {
$('#loadedContent').css("display","").html(results);
//alert($($('#loadedContent table')[4]).text());
//The above line parses the table i need and displays the content in an alert box.
//But when I try the same line of code to display a specific row, it doesnt display anything
alert($($('#loadedContent table tr:eq(2)')[4]).text());
});
Note that the Website does not assign a name or id to the tables in its page. so I try to extract the table using the position. I am quite successful until this. But when i try to extract a specific row of data from the table. I could not. What should I do to extract a row of data from the table.
P.S: there are multiple tables in the page and none of it is assigned a name or id
You can use :eq() selector here
alert($('#loadedContent table:eq(4) tr:eq(2)').text());
This will select 3rd tr inside 5th table

How to add a row below the currently selected row (based on a dropdown input) using jQuery?

I have a table with a bunch of rows. In the last column of every row, there is a dropdown. When the dropdown changes, I need a new table row to appear below the row where the user selected the dropdown item. However, I also need the new row to have different data depending on what was selected in the dropdown.
Is any of this possible using only jQuery?
Note that I'm using ASP.NET for back-end development, so if a solution can be found without using ID's that would be great.
$("table select").live("click",function(){
var row=$(this).parent().parent();//add some .parent() untill you get the TR element
var val=$(this).val(); //<select> value if you want to use it for some conditions
$("<tr><td>....</td></tr>").insertAfter(row);
})
It's simple enough to add the HTML using JQuery. However, if you intend to save this data back to the server, the default ASP.NET process (using ViewState) will ignore the new rows. Instead, you would need to directly read the submitted form properties.
To learn how to add a row, look at the suggestions here: How to add a new row to a specified table with jQuery?

Categories