I was wondering how you would go about deleting a row in a table (HTML table) on the click of a button. At the moment the table is dynamically created with javascript and jQuery but I want to have a button that deletes the buttons row when selected. At the moment is this sort of what each row looks like in the table:
<tr><th>Some text</th><th><button type="button">Delete</input></th></tr>
Since each row has the same setup, is there a way to delete the parent <tr> of the button that was clicked without the use of id's?
You mean*:
<tr><th>Some text</th><th><button class="delete">Delete</button></th></tr>
DEMO
$('#table').on('click', '.delete', function(){
$(this).closest('tr').remove();
});
Related
I have a popup data table in each row of a maintable with some checkboxes in it.
I am selecting/checking items randomly by clicking the checkbox buttons for each row and printing the values checked with the help of Print button.
I am observing that only the last selection of checkbox buttons are overwriting all the earlier selections.
How can I get the appropriate selection of checkbox buttons corresponding to each row?
Snippet: https://snippet.webix.com/11irkt7o
Thanks.
You code uses a single instance of popup table for each rows, so as result whey you are calling $$pt.eachRow you are itterating other the last active value, all previous values are lost.
The better solution will be to use click handler of close button, to get all checked rows and store that data in the master row
{view:"button", label:"Close", click:function(){
ids = collectCheckedRows($$('p_table'));
$$('mytable').updateItem(selectedRow, { checked : ids })
this.getTopParentView().hide()
}}
Now, to print all values you can use
$$('mytable').eachRow(function(id){
console.log(id, this.getItem(id).checked);
});
I have functionality that allows my ng-grid to remove rows in which when you click the remove button, the row is deleted from the ng-grid. Below is an example of how I have it set up now:
http://plnkr.co/edit/NL7sMGT6acdUHAAZPNba?p=preview
I want to get it so that the remove button disappears on the very last row. In the example above, for example, all but the Enos entry would have no delete button. Also, if I created a new row under Enos, I would have it so that Enos would then have a remove button and the new row under Enos would have no delete functionality. I have the functionality to add/remove rows, but I simply want to get the remove button to disappear on the last row. How would I do so?
Any help would be appreciated. Thanks!
You can use the ng-hide directive to hide the button when the row index is the last one in the collection:
<input type="button"
value="remove"
ng-click="removeRow()"
ng-hide="row.rowIndex == $parent.myData.length-1" />
This uses the $parent property to access the original list on the parent scope to get the count.
I am using Jquery Jtable, I need to expand a child table (I have the "master" row ID).
How can I achieve this?
I would like to show a child table expanded, not collapse as is shown as default.
Thanks,Nk
Trigger the click event:
$('#divTable').jtable('getRowByKey',1).find("img").trigger('click');
I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.
Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle
Try to bind click event also.
Demo
$(document).on("change click","#loads",...
How do I get the value of a radio button group when the add button is clicked?
Below is what I have so far:
http://jsfiddle.net/RBYzm/
Whenever I add a row to the other table no matter which radio button I select it does not showup as selected in the table that I am adding rows to.
I see that you are not setting the values of row that is added to the one from which you want to add.. You are just creating the elements but not copying over the values from the main table..
Why don't you just use .clone() instead..
EDIT
UPDATED FIDDLE
I have made some changes in the code.. Changed the id's where there were duplicates.. Also accessing the values of the current row and copying it over to the newly added row..