I'm trying to create a button, by pressing it should dynamically add rows to the table. However when I try to call the function in TS (save_row()), it throws error.
How can I call the function in TS/how can I dynamicall append the rows by pressing the button?
HTML:
<table id="myTable">
<thead>
<tr>
<th>GEOGRAPHY</th>
<th>COUNTRY</th>
<th>STATE</th>
<th>REGULATION</th>
<th>SMS</th>
<th>WEB</th>
<th>EMAIL</th>
<th>OPERATION</th>
</tr>
</thead>
<tbody #ir>
</tbody>
</table>
TypeScript:
var d=geo_Value;
var len=d.length;
var row = this.renderer.createElement('tr');
const col=this.renderer.createElement('td');
row.appendChild(col);
col.outerHTML ="<tr id='row"+len+"'><td
id='name_row"+geo_Value+"'>"+cou_Value+"</td><input type='button'
id='save_button' value='Save' class='save' onclick='save_row("+len+")'>
</td></tr>";
this.renderer.appendChild(this.ir.nativeElement,row);
let idGet=document.querySelectorAll('#save_button');
var myMessage = "it's working";
function save_row(a) {
}
In angular ,event binding should be like this
id='save_button' value='Save' class='save' (onclick)='save_row("+len+")'>
You are missing brackets.
Related
I am creating table, and want to remove row by id using input field. (if input field matches with id then the row must be deleted)
can not figure it out.
Your help is much appreciated
`
<body onload="addRow()">
<table id="myTable" style="display:none">
<tr>
<th class="borderless">ID</th>
<th>Name</th>
<th>Username</th>
<th>Gender</th>
<th>Country</th>
</tr>
<tbody id="myTableBody">
</tbody>
</table>
<button type="button" id="buttonShow" onclick="showTable()">Show Table</button>
<button type="button" id="buttonAdd" onclick="addRow()" disabled>Add a new row</button>
<br>
<label>
<input class="input1" type="text" name="todoTags"/>
<button class="dellbtn" id="buttonDell"onclick="delRow()" disabled>Delete row</button>
</label>
`
`
function showTable(){
document.getElementById("myTable").style.display = "block";
document.getElementById("buttonAdd").disabled = false;
document.getElementById("buttonDell").disabled = false;
}
const btn = document.querySelector('.dellbtn')
const userTags = []
`
Here is my: JSfiddle
What you could do is changing the addRow() method so it adds a data-attribute to each row, in the <tr>. You can achieve this goal by adding this when creating the row :
row.setAttribute("row-id", tr.length - 1);
Then, when you want to delete it, you can simply search the
row that has the data-attribute that you just input. And it will look like this :
function delRow() {
const value = document.getElementById("valueToDelete").value;
document.querySelector('[row-id="' + value + '"]').remove();
}
I created a fork to your JSFiddle that you can check right here.
Hope it helps ! Good luck :)
Not exactly what you're asking, but this method might work better for you. It uses a delete button for each row so you can decide which one to delete. Then it uses a delegate listener to enable the delete buttons
const table = document.querySelector('#theTable tbody');
let c = 1
const addRow = () => {
table.innerHTML += `<tr><td>${c} data</td><td>${c} data</td><td><button class='delete'>delete</button></td></tr>`;
c++
}
// delegate listener for the delete button
table.addEventListener('click', e => {
if (e.target.classList.contains('delete')) {
e.target.closest('tr').remove();
}
})
<table id='theTable'>
<th>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td></td>
</tr>
</th>
<tbody>
</tbody>
</table>
<button onclick='addRow()'>Add Row</button>
I have a table in which each row has a delete button. on click of the button the data gets deleted. However to verify that record is deleted, I have to refresh the page. I want to hide the current row on click of the delete button. Here is my code.
<table>
<tr>
<th>Delete</th>
<th>Id</th>
<th>Name</th>
</tr>
<tr *ngFor="let person of people" *ngIf="!hideRow">
<td><button (click)="delete(person.id)" title="Delete">Delete</button></td>
<td>person.Id</td>
<td>person.Name</td>
</tr>
</table>
and in my component.ts On delete I change the value of hideRow
delete(id) {
this.hideTr = true;
this.personService.delete(id).subscribe(p=> console.log(p));
}
hideRow is a boolean variable with default value of false. The problem is that when I click on delete, all the rows become hidden(of course). How can I refer just to the current row?
When you want to delete the row then you should delete it in actual instead of hide row. No need of *ngIf="!hideRow". You no need to refresh the page, this is beauty of AngularJS. Below is code to delete particular row. Pass $index of the row:
HTML code:
<table>
<tr>
<th>Delete</th>
<th>Id</th>
<th>Name</th>
</tr>
<tr *ngFor="let person of people">
<td><button (click)="delete($index)" title="Delete">Delete</button></td>
<td>person.Id</td>
<td>person.Name</td>
</tr>
</table>
JavaScript Code:
// delete row
$scope.delete = function(index) {
$scope.people.splice(index, 1);
};
Simple yet more effective :
Template Side :
<tr *ngFor="let person of people" *ngIf="!person?.hideRow">
<td><button (click)="delete(person)" title="Delete">Delete</button></td>
<td>person.Id</td>
<td>person.Name</td>
</tr>
Component Side :
delete(person) {
person.hideRow = true;
this.personService.delete(person.id).subscribe(p=> console.log(p));
}
Without changing user's (property) interface
Template Side :
<tr *ngFor="let person of people;let i = index;">
<td><button (click)="delete(i , person.id)" title="Delete">Delete</button></td>
<td>person.Id</td>
<td>person.Name</td>
</tr>
Component Side :
delete(index , id) {
this.people.splice(index, 1);
this.personService.delete(id).subscribe(p=> console.log(p));
}
Based from the code you provided, I would remove this part *ngIf="!hideRow" and add this to your component
delete(id) {
this.personService.delete(id).subscribe(p=> {
console.log(p);
this.people.filter( person => person.id !== id)
// or you can use splice by using the index
});
}
Now your html is simpler and no need to use *ngIf
<table>
<tr>
<th>Delete</th>
<th>Id</th>
<th>Name</th>
</tr>
<tr *ngFor="let person of people">
<td><button (click)="delete(person.id)" title="Delete">Delete</button></td>
<td>person.Id</td>
<td>person.Name</td>
</tr>
</table>
I am using datatables to display table data. this table has an action column to remove record. I am trying the achieve the delete action by adding the event listener to the specific class. When i am trying to get the elements by the class name it is returning only first page elements of the datatable event though we have 5 pages. Can you help me in this regard.
var lastName = document.querySelectorAll('.lastname');
console.log(lastName);
i need the solution in plain javascript.
<table id="example" class="display nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td><button class="btn btn-primary lastname" name="delete"></td>
</tr>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable(
);
var lastName = document.querySelectorAll('.lastname');
console.log(lastName);// i am expecting this should return all elements with class **lastname**.
});
</script>
I have only included one row. assume we have 50 rows.
you can include the element like div
try this.
var lastName = document.querySelectorAll('div.lastname');
console.log(lastName);
you can read this Documentation for better information.
i am new to mvc so please help
please see the fiddle https://jsfiddle.net/shaswatatripathy/9d0oknyt/2/
here i have a table and I have to write a jquery function which will get all the rows which have status as modified and send data to controller action and access this data to create datatable in controller action
the table is dynamic -many rows can come up there so need a jquery function which will be invoked on a button click and get rows details with status modified
html
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Gender</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>us</td>
<td>male</td>
<td>static</td>
</tr>
<tr>
<td>joana</td>
<td>washington</td>
<td>female</td>
<td>static</td>
</tr>
<tr>
<td>steve</td>
<td>belgium</td>
<td>male</td>
<td>modified</td>
</tr>
<tr>
<td>jimmy</td>
<td>angola</td>
<td>male</td>
<td>modified</td>
</tr>
<tr>
<td>lisa</td>
<td>india</td>
<td>female</td>
<td>modified</td>
</tr>
</tbody>
</table>
<br />
<input type="button" onclick="sendDetailsToControllerAction()" value="get details"/>
css
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
i can use jquery ajax method to send data to my controller action
server side
public actionResult GetDetails()
{
return view();
}
how to get details of every row with status modified and send it controller .
table header names and column names in my data table which i will create in action will be different .
i dont need that much help creating datatable out of data , but dont know how to send that data and get it
Using below function you will be able to get "modified" rows and save those row in array and then you can use $.ajax to call your Action in controller
<script type="text/javascript">
function sendDetailsToControllerAction() {
var tableData = document.getElementById('mytable');
var numberOfRows = tableData.rows.length;
for (var i = 1; i < numberOfRows; i += 1) {
var row = tableData.rows[i];
if (row.cells[3].innerText == 'modified') {
//Rows which have modified status
console.log(row)
}
}
}
</script>
I have a footable that I need to clean. I mean, I need to delete all rows in the footable. Is there any footable function to do that? Or do I need to delete rows one by one?
I tried to reinitialize the table doing this:
$('.footable').footable();
I also have tried to iterate between the rows like this:
var footable = $('table').data('footable');
//This is the problem I don´t know how to get first row in the table.
var row = ??????.parents('tr:first');
var next=row.next();
for (var i=0; i<long-1; i++){
footable.removeRow(next);
next=row.next();
}
footable.removeRow(row);
And my corresponding html source code:
<table class="footable footable-loaded">
<thead>
<tr>
<th>Cantidad</th>
<th>Producto</th>
<th>Precio</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Total</th>
<th id="total">19.5</th>
<th></th>
</tr>
</tfoot>
</table>
You can delete by removeRows() function:
function removeRows(){
$(".footable>tbody>tr").each(function(index, elem){
$(elem).remove();
});
}
DEMO
Try this one
footable.rows.load([])