I currently have a jQuery Datatable, which upon a row being clicked on, the data from that row is outputted to textboxes and select boxes. I'm trying to make it so whatever is entered into the textboxes, will be saved/entered into the selected row upon pressing the saverow button.
Here's my JSFiddle: JSFiddle
Javascript:
var table = $('#example').DataTable();
(function () {
var table = document.querySelector('#example');
var name = document.querySelector('#nameinput');
var format = document.querySelector('#formatinput');
var address = document.querySelector('#addressinput');
var report = document.querySelector('#reportinput');
var alarm = document.querySelector('#alarminput');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
var tr = e.target.parentElement;
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML);
}
name.value = data[0];
address.value = data[1];
format.value = data[2];
report.value = data[3];
alarm.value = data[4];
console.log(alarm.value);
}
$("#saverow").click(function() {
var table1 = $('#data-table').DataTable();
var data = [];
data[0] = name.value;
data[4] = alarm.value;
console.log(name.value);
console.log(alarm.value);
table1.draw(true);
});
})();`
With the saverow code, I thought by trying to make the columns equal to the value of the textbox, then redrawing the table would work. The console does have the correct output when you type something new into the textbox then pressing Save. I just cant figure out how to put that back into the selected row.
I'm not wanting to do the inline editing if possible. Trying to keep it in this format.
I don't know if this counts as an answer, but you're not actually doing anything with that data variable in the save row click. You take the datatable, do nothing to change it, and then redraw it. So it's not surprising nothing is happening.
See this change to your fiddle to get the rows adding:
https://jsfiddle.net/o92g9goL/14/
Primarily, you need to set the table and datatable into different arrays. Also do it inside the main function. Also you need to actually add this code:
datatable.row.add(data).draw(false);
As for the editing, you'll need to make sure that you don't just prepopulate it, but make an actual reference to that row, otherwise how will it know to update it?
Related
I use SheetJS to upload an excel sheet to a ui.table. While uploading I add a technical ID to my column names, which I will need later on in my project. This is how I am adding the technical ID:
getColumnNames: function(worksheet, aData) {
var firstRow = aData[0];
var oColumns = [];
var cells = Object.keys(worksheet);
for (var i = 0; i < Object.keys(firstRow).length; i++) {
var columnName = Object.keys(firstRow)[i];
var technicalName = "COL" + ('0' + (i+1)).slice(-2);
oColumns.push({
columnId: columnName,
technicalId: technicalName
});
}
return oColumns;
},
When creating the Model, I bind both the columnId and the technicalId to each column.
My users should have the option to reorder the table columns in order to do a mapping to another table. (Context here is not really relevant) So basically there is another table below my uploaded table and a user should be able to reorder the columns of the "uploadTable" to match them with the table below.
Now in order to do a proper mapping, my technical ID has to be adjusted after the reordering is done. Therefore I'd like to add a function that's being executed after the user clicked a "refresh" button.
This function should adjust the technical columnNames. --> E.g. data gets uploaded, column on position 1 has the technical ID "COL01" now it gets dragged to position 2 --> technical ID should change to COL02 and vice versa.
I believe, the only way to do this is by accessing the DomRef of the table, because that's the only place where the actual current table structure is stored, but I'm not exactly sure how I would proceed.
My reordering function only gets the data so far:
onReorder : function() {
var table = this.getView().byId("uploadData");
var currentStructre = table.getDomRef();
},
I would appreciate any hints towards this. If anything is unclear, I'm happy to explain it!
sap.ui.table.Table allows its columns to be reordered by dragging and dropping, and the event columnMove is fired after.
One could keep track of and update some sequence label (e.g. ids) using an approach like this:
Remember ids (for example column label as id):
ids = oTable.getColumns().map(oColumn => oColumn.getAggregation('label').getText())
Update ids:
oTable.attachColumnMove(function(oEvent) {
var from = oEvent.getParameter('column').getIndex();
var to = oEvent.getParameter('newPos');
var name = names.splice(from, 1);
names.splice(to, 0, name);
// Then write new ids to model;
})
Im facing a small issue in UI table. How can we remove the selected rows if we unselect the checkbox for a row? To get the row data im using below code and it is working fine without any issues.
getEnterDetailCount:function(oEvent){
var oRowContext = oEvent.getParameter("rowContext");
var oContextObject = oRowContext.getObject();
roomsArray.push(oContextObject);
};
Using the above method, If i select the row im able to get the Complete Row Data.
But if i unselect the row, Still it is considering as a row selection and count is getting increased.
In XML im using rowSelectionChange event to check and uncheck the checkbox on the row
Can someone please help me to fix this issue?
Thank you in advance.
Regards,
Pavantej
For sap.m.table you can use getSelectedItems to get all selected rows from your table. Loop all selected rows and put them in your array.
getEnterDetailCount:function(oEvent){
var oContextObject;
var roomsArray = [];
var oTable = this.getView().byId("myTable");
var aSelectedItems = oTable.getSelectedItems();
aSelectedItems.forEach( function(v,i){
oContextObject = v.getBindingContext().getObject();
roomsArray.push(oContextObject);
});
};
For sap.ui.table you can use getSelectedIndices()
getEnterDetailCount:function(oEvent){
var oContextObject;
var roomsArray = [];
var oTable = this.getView().byId("myTable");
var aSelectedIndices = oTable.getSelectedIndices();
aSelectedIndices.forEach( function(v,i){
oContextObject = oTable.getContextByIndex(v).getObject();
roomsArray.push(oContextObject);
});
};
Need to Edit and update the td in the table. I need to edit the table when I click the "edit" button, and similarly update it on clicking the save.
function editCell(e) {
var t = document.getElementById("table");
var trs = t.getElementsByTagName("tr");
var tds = null;
tds = trs[i].getElementsByTagName("td");
tds[3].appendChild(firstname);
tds.innerHTML = firstname.value;
tds[4].appendChild(lastname);
tds.innerHTML = lastname.value;
tds[5].appendChild(email);
tds.innerHTML = email.value;
tds[6].appendChild(phnumber);
tds.innerHTML = phnumber.value;
}
JsFiddle
Solution: Consider the following JSFiddle with your solution. The following function "saves" the data to the td.
function saveCell() {...}
Note: If you want to physically save it somewhere you would need to use a server side language such as PHP.
So, I'm currently working on a HTML page that displays a table with an editable text box and a delete button for the row for every quote in a list. The list is fetched from a stored file, so I need to dynamically generate this table and its rows every time I fetch it. However, when this code runs, the table generated is empty, because when the listener is added, the delete row function executes and just removes the row right after it's added.
for (var i = 0; i < quotesArray.length; i++) {
//Insert a new row into the table.
var newQuoteRow = quoteList.insertRow(-1);
var cellOne = newQuoteRow.insertCell(0);
var cellTwo = newQuoteRow.insertCell(1);
//Insert editable text boxes for a quote into the row.
var quoteInput = document.createElement('input');
quoteInput.value = quotesArray[i];
quoteInput.className = "quote";
cellOne.appendChild(quoteInput);
//Put a delete button at the end of the row.
var deleteQuoteButton = document.createElement('button');
deleteQuoteButton.innerHTML = "x";
cellTwo.appendChild(deleteQuoteButton);
deleteQuoteButton.addEventListener('click', deleteCurrentQuoteRow(deleteQuoteButton));
}
});
}
function deleteCurrentQuoteRow(buttonToDelete) {
var currentRow = buttonToDelete.parentNode.parentNode; //get the grandparent node, which is the row containing the cell containing the button.
currentRow.parentNode.removeChild(currentRow); //delete the row in the table
}
From what I understand, this problem occurs because the function linked to in the addEventListener method has a parameter, which causes it to execute immediately instead of waiting for a click. However, I can't think of a way to implement this without passing the button being clicked as the parameter, because then I won't know which row to delete. How can I fix this so that the table will actually populate, and the delete button will actually delete a row?
Currently you are invoking the function deleteCurrentQuoteRow and assigning its return value which is undefined as event listener.
Use
deleteQuoteButton.addEventListener('click', function(){
deleteCurrentQuoteRow(this); //Here this refers to element which invoke the event
});
OR, You can modify the function deleteCurrentQuoteRow as
function deleteCurrentQuoteRow() {
var currentRow = this.parentNode.parentNode; //get the grandparent node, which is the row containing the cell containing the button.
currentRow.parentNode.removeChild(currentRow); //delete the row in the table
}
Then you can just pass the function reference as
deleteQuoteButton.addEventListener('click', deleteCurrentQuoteRow);
I have a table that is built dynamically from a user specified query to a database and I want to give the user the option to edit the data from the generated HTML table. When the user double clicks on the row containing the data they want to edit, I have a new row appear underneath it with textboxes for them to submit new values. Right now, when the user clicks double clicks two rows, both rows of textboxes remain in the table and I want to delete the first row before the second shows up. My question is, what is a good was to find table rows containing textboxes so that I can perhaps use JavaScript's deleteRow() function?
I'm generating rows like so:
function editRow(row) {
var table = document.getElementById("data");
var newRow = table.insertRow(row.rowIndex + 1);
var cell;
for (var i = 0; i < row.childNodes.length; i++) {
cell = newRow.insertCell(i);
textBox = document.createElement("input");
textBox.type = "text";
textBox.placeholder = row.childNodes[i].innerHTML;
textBox.style.textAlign = "center";
textBox.style.width = "90%";
cell.appendChild(textBox);
}
}
and the only way I can I can think of doing it is something like (pseudo code):
for all table rows
if row.childNodes.innerHTML contains 'input'
deleteRow(index)
Thanks for the help
You could use jQuery. Assuming row is a DOM element, this should work:
var textBoxes = $("input:text", row);
i guess the easiest option would be to add the created rows to an array. This way you simply have to delete the rows inside the array and not iterate through the whole table.
I ended up doing the following:
function editRow(row) {
var table = document.getElementById("data");
clearExistingTextBoxes(table);
...
}
function clearExistingTextBoxes(table) {
var tBoxRow = table.getElementsByTagName("input");
if (tBoxRow.length > 0) {
tBoxRow = tBoxRow[0].parentNode.parentNode;
table.deleteRow(tBoxRow.rowIndex);
}
}
Assuming I'm only going to be clearing one row at a time.