We Keep Coding

delete row in table from firestore database

I am trying to create a button to delete a row in my table from the firebase database but I am not sure how to choose one specific row to delete using a button function. I am using javascript and firesource.
The function that i am using to fill my table is
function filled_table_start(num){
document.getElementById("tbody1").innerHTML = "";
members.forEach((member) => {
if(member.exists()){
row += '<tr id="student'+ (count+1) +'" >';
row += '<td>' + (count+1) +'</td>';
row += '<td>' + member.data().studentID + '</td>';
row += '<td>' + member.data().name + '</td>';
row += '<td>' + member.data().gender + '</td>';
row += '<td>' + member.data().schoolEmailAdd + '</td>';
row += '<td>' + member.data().handphoneNum + '</td>';
row += '<td><button type="button" onclick= "' + deleteDoc(doc(db,this.studentID ))+'" >Delete User</td>';
//row += '<td>' +
row += '</tr>';
document.getElementById('tbody1').innerHTML += row;
count ++;
};
});
}
I am wondering if something like this.deleteDoc will work? or is there another function that can be used to delete a specific row?

I just created a dummy demo table here. What I did is, simply give a class to each of the buttons, when you will click on the button, It will find the closest tr and remove it.
$("#tbody1").on('click', '.deleteDoc', function () {
$(this).closest('tr').remove();
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="tbody1">
<tr>
<th>Sl</th>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Mail</th>
<th>Mobile</th>
<th>Action</th>
</tr>
<tr id="student1">
<td>1</td>
<td>11</td>
<td>ABC</td>
<td>F</td>
<td>abc#gmail.com</td>
<td>123456</td>
<td><button type="button" class="deleteDoc"> Delete User </td>
</tr>
<tr id="student2">
<td>2</td>
<td>12</td>
<td>DEF</td>
<td>M</td>
<td>def#gmail.com</td>
<td>123456</td>
<td><button type="button" class="deleteDoc"> Delete User </td>
</tr>
<tr id="student3">
<td>3</td>
<td>13</td>
<td>IJK</td>
<td>F</td>
<td>ijk#gmail.com</td>
<td>123456</td>
<td><button type="button" class="deleteDoc"> Delete User </td>
</tr>
</tbody>
</table>

Dynamically change text in table using by clicking a checkbox

I have a data in JSON format and I convert it to a HTML table. Now I want to
change the text from False to True if I check the checkbox. How can I do that?
Here is the code for creating the HTML table:
$.each(result, function (index, value) {
var Data = "<tr>" +
"<td class='' id='stdID' >" + value.StudentID + "</td>" +
"<td class='' id='stdRol'>" + value.RollNo + "</td>" +
"<td class='' id='stdName'>" + value.FirstName + "</td>" +
"<td class='cbx' value='1'><input type='checkbox' id='cc"+index+"'><span id='checkbox-value'> False</span></td>" +
"</tr>";
SetData.append(Data);
This is the result of this: output

To achieve what you require you need to use a delegated event handler, as you dynamically append the rows after the page has loaded, to hook to the change event of the checkboxes. Then you can set the text of the sibling span element based on the checked property. Something like this:
$('table').on('change', ':checkbox', function() {
$(this).next('span').text(this.checked);
});
span.checkbox-value { text-transform: capitalize; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="stdID">value.StudentID</td>
<td class="stdRol">value.RollNo</td>
<td class="stdName">value.FirstName</td>
<td class="cbx" value="1">
<input type="checkbox" id="cc1">
<span class="checkbox-value">False</span>
</td>
</tr>
<tr>
<td class="stdID">value.StudentID</td>
<td class="stdRol">value.RollNo</td>
<td class="stdName">value.FirstName</td>
<td class="cbx" value="1">
<input type="checkbox" id="cc2">
<span class="checkbox-value">False</span>
</td>
</tr>
</table>
You should note that your loop is creating multiple elements which have the same id, which is invalid HTML. In the example above I've changed them to classes instead.

Another way around to achieve your desired output
$(document).on('change', '.changeStatus', function() {
var row = $(this).closest('tr');
if($(this). prop("checked") == true){
row.find('.changeValue').html('True');
} else {
row.find('.changeValue').html('False');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Id</td>
<td>Roll_no</td>
<td><input type="checkbox" class="changeStatus"></td>
<td class="changeValue">False</td>
</tr>
<tr>
<td>Id</td>
<td>Roll_no</td>
<td><input type="checkbox" class="changeStatus"></td>
<td class="changeValue">False</td>
</tr>
<tr>
<td>Id</td>
<td>Roll_no</td>
<td><input type="checkbox" class="changeStatus"></td>
<td class="changeValue">False</td>
</tr>
</tbody>
</table>

Dynamic table with bootstrap

I'm trying to do dynamic table with bootstrap but I can't deduce why it's not working. There's a HTML part:
<div class="container">
<button onclick="CreateTable()">Extend</button>
<table class="table">
<thead>
<tr>
<th>Employee Id</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Country1</td>
</tr>
<tr>
<td>2</td>
<td>Mary Moe</td>
<td>Country2</td>
</tr>
<tr>
<td>3</td>
<td>Jack Dooley</td>
<td>Country3</td>
</tr>
<p id="id_tabela"></p>
</tbody>
</table>
</div>
and there's javascript:
function CreateTable() {
var employee = new Array();
employee.push([4, "Billie Jean", "Country4"]);
employee.push([5, "Harish Kumar", "Country5"]);
employee.push([6, "Pankaj Mohan", "Country6"]);
employee.push([7, "Nitin Srivastav", "Country7"]);
employee.push([8, "Ramchandra Verma", "Country8"]);
var tablecontents = "";
for (var i = 0; i < employee.length; i++) {
tablecontents += "<tr>";
for (var j = 0; j < employee[i].length; j++) {
tablecontents += "<td>" + employee[i][j] + "</td>";
}
tablecontents += "</tr>";
}
document.getElementById("id_tabela").innerHTML = tablecontents;
}
So I want to extend the table and I can't figure out why it's not working.

You are loading the data inside the paragraph, which is not what you want to do. Also the paragraph shouldn't be there. You can add an id to tbody and then just extend its innerHTML like so: https://jsfiddle.net/14pt76wp/.
Why are you using native functions? bootstrap has jQuery included. You could do something like:
$('table tbody').append(tablecontents);
Another trick:
Iterate over the array and do employee[i] = '<td>' + employee[i].join('</td><td>') + '</td>';
tablecontents = '<tr>' + employee.join('</tr><tr>') + '</tr>';

Add, edit and delete function to my javascript

I'm looking to add edit and delete functionality to the following JavaScript and I'm not sure where exactly to start.
This functions just fine as a input add but It needs to be editable and deletable. Is Javascript the way to go here?
HTML
<table width="600px" class="setpoint-form-table">
<tr>
<td colspan="5">
<p style="font-size:16px; float:left;">First Name / Last Name Table Post and Edit</p>
</td>
</tr>
<tr>
<td colspan="5" height="20px"></td>
</tr>
<tr>
<input type="text" id="RowPlaceholder2" style="visibility:hidden;" />
<td width="100px" style="font-size:14px">First Name</td>
<td><input type="text" id="fName" class="setpoint-textbox" /></td>
<td width="100px" style="font-size:14px;">Last Name</td>
<td><input type="text" id="lName" class="setpoint-textbox" /></td>
<td><button type="button" id="edit">Edit</button></td>
</tr>
<tr>
<td colspan="5" height="20px"></td>
</tr>
<tr>
<td colspan="5"><button type="button" onclick="HvacStandards()">Submit</button></td>
</tr>
<tr>
<td colspan="5">
<br />
<br />
<table width="600px" id="testingWithEdit">
<tr>
<td style="background-color:#fff; color:#00468C; border-bottom:1px solid #000; border-right:1px solid #000;">First Name</td>
<td style="background-color:#fff; color:#00468C; border-bottom:1px solid #000;">Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
JavaScript
function HvacStandards() {
var rowID = document.getElementById("RowPlaceholder2").value;
var firstName = document.getElementById("fName").value;
var lastName = document.getElementById("lName").value;
var sHtml = "<tr>" +
"<td id=\"firstName" + rowID + "\">" + firstName + "</td>" +
"<td id=\"lastName" + rowID + "\">" + lastName + "</td>" +
"</tr>";
$("#testingWithEdit").append(sHtml);
rowID++;
document.getElementById("RowPlaceholder2").value = rowID;
document.getElementById("fName").value = "";
document.getElementById("lName").value = "";
}

Here's just one of the many ways to do this:
In this fiddle, I simply added an extra column to sHTML containing edit and delete buttons that call editRow() and deleteRow() respectively, both passing the parameter of the rowID.
I then defined two new global variables, newRow and currentRow. I then modified HvacStandards use newRow as the RowID. Additionally, I modified it to switch to saveEdits if currentRow is not -1, so that hitting the submit button saves the edits instead of just creating a new row.
Then I created the the editRow function that fills the textboxes with the html contained within firstName+rowID and lastName+rowID, and then set currentRow to the rowID.
The saveEdits function then modifies the html of the table rows to the new values from the inputs, clears the inputs, and then resets currentRow to -1 so hitting submit will add a new row next time.
Finally, the deleteRow function simply removes the row from the dom. (I added an id to the tr in sHTML so that the row as a whole can be identified).
Let me know if this all makes sense and does what you need it to do :)

Totalling up values in a table

After an ajax call, results is returned in success, then:
var the_data = results;
var buildHTML = [];
buildHTML.push("<tr><td>Department</td><td>Count</td><td>Value</td>");
for (var i = 0; i < the_data.length; i++) {
buildHTML.push("<tr><td>" + the_data[i].department + "</td><td>" + the_data[i].count + "</td><td>£" + the_data[i].value + "</td>");
}
$('.portlet-content').empty().append("<table>" + buildHTML.join('</tr>') + "</table>");
Which builds something like:
<table>
<tr>
<td>
Department
</td>
<td>
Count
</td>
<td>
Value
</td>
</tr>
<tr>
<td>
Marketing
</td>
<td>
10
</td>
<td>
£100,000
</td>
</tr>
<tr>
<td>
Information Technology
</td>
<td>
20
</td>
<td>
£1,000,000
</td>
</tr>
</table>
I know how to add another final row at the bottom of this table, but in that row, I want to display totals, i.e. a total of the count and a total of the value, e.g:
<table>
<tr>
<td>
Department
</td>
<td>
Count
</td>
<td>
Value
</td>
</tr>
<tr>
<td>
Marketing
</td>
<td>
10
</td>
<td>
£100,000
</td>
</tr>
<tr>
<td>
Information Technology
</td>
<td>
20
</td>
<td>
£1,000,000
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
30
</td>
<td>
£1,100,000
</td>
</tr>
</table>
How can this be done at clientside?

Here is a generic solution that will work for any table with a tfoot and tbody:
$("table tfoot td").each(function(columnIndex) {
var totalsElement = $(this);
if (totalsElement.hasClass("sumTotal")) {
var sum = 0.0;
totalsElement.parents("table").find("tbody tr").each(function() {
sum += parseFloat($(this).children("td").eq(columnIndex).html());
});
totalsElement.html(sum);
}
});
You need to mark the computed footer cells with "sumTotal" CSS class. To keep it simple I had to remove the pound characters from the table but it works:
http://jsfiddle.net/fRdpJ/47/

You could simply amend the for loop in your code to get the sums.
...
// vars for sum
var the_count = 0, the_sum = 0;
for (var i = 0; i < the_data.length; i++) {
the_count += the_data[i].count;
the_sum += the_data[i].value;
buildHTML.push("<tr><td>" + the_data[i].department + "</td><td>" + the_data[i].count + "</td><td>£" + the_data[i].value + "</td>");
}
buildHTML.push("<tr><td>Total</td><td>" + the_count + "</td><td>" + the_sum + "</td>");
...

add a class="Count" on the TD for which you want to calculate count and then calculate count using JQuery like this:
http://jsfiddle.net/sv2dg/13/