Add table cell to existing table row, jQuery - javascript

I'm trying to add values to a table using jQuery - unfortunately, I don't know how to get jQuery to add table cells to an existing row. For example:
$("<td><a href='#'>" + key + "</a></td>").click(function(e) {
e.preventDefault();
testset(key);
}).appendTo('#table1');
This adds cells to the end of the table with id table1. What would be the best way to go about adding cells to an existing table row (<tr>) using jQuery? Quick google hasn't revealed anything.
Regards,
SystemError

.appendTo('#table1 #rowId');
Or you could do:
.appendTo('#table1 tr:nth-child(5)');
http://api.jquery.com/nth-child-selector/

You must append them to a specific row and not to the table:
$("<td><a href='#'>" + key + "</a></td>").click(function(e) {
e.preventDefault();
testset(key);
}).appendTo('#table1 tr#yourrowId');

Related

Appending row with checkbox in google scripts

Im writing a small google script for an excel sheet which appends a row on a POST request: depending on the POST parameters I either append the row to the end, or I insert it in between rows.
One of the columns of the is actually a boolean that Im trying to represent as a checkbox.
The problem is when I try to append a row
sheet.appendRow([e.parameter.parameter1, e.parameter.parameter2, "FALSE"]);
It simply writes false in that column.
On the other hand when I insert a row in between other rows:
sheet.insertRows(position);
sheet.getRange("A" + (position)).setValue(e.parameter.parameter1);
sheet.getRange("B" + (position)).setValue(e.parameter.parameter2);
sheet.getRange("C" + (position)).setValue("FALSE");
The checkbox column (takes the format from the surrounding rows?) and becomes a checkbox.
Is there a simple solution to append a row with a column as a checkbox?
Thank you.
You need to create a checkbox first with data validation
Sample:
var checkbox = SpreadsheetApp.newDataValidation().requireCheckbox().build();
sheet.getRange("C" + (position)).setDataValidation(checkbox).setValue("FALSE");

Jquery Find every all cells with a certain text and delete entire row

I am trying to do some work with tables and jQuery. Basically, I want to be able to go through an entire column based on its header and look for certain values. If those values are present I want to then delete the entire row. My code so far can select the correct column:
ownerIndex = $('th:contains("Outstanding")').index();
$('table tr td:nth-child('+ownerIndex+')').parent().hide();
From here I am unsure how to do an 'if' statement to look at the values. I am looking for all cells with the value of "0.00".
Thanks in advance.
Loop through each td element you selected using jQuery each function:
$('table tr td:nth-child('+ownerIndex+')').each( function(){
if($(this).html() == "0.00") {
// do your stuff
}
});

Getting the row information on click with JQuery

So I'm trying to get the data in my table row on click and create/update another table with the clicked information. The problem is I'm not sure how to pass the data. As of right now I can click on the table rows and get the events started and It looks like my second table is created as well but the information is not passed properly.
I appreciate it if someone can help me by telling me how I'm supposed to pass the information
$(document).on("click", "tr", function(HTMLTableRowElement){ // watch the whole document for when existing (or new) tr elements are clicked
//console.log("table row clicked!");
let tbody = $("#employee-Details tbody");
let fullNameTd= $('<tr>').text(HTMLTableRowElement.FirstName+' '+HTMLTableRowElement.LastName);
let hireDate= $('<tr>').text( moment((HTMLTableRowElement.HireDate)).format('MM/DD/YYYY'));
let fullAddress= $('<tr>').text(HTMLTableRowElement.AddressStreet+' '+HTMLTableRowElement.AddressCity+' '+HTMLTableRowElement.AddressState+' '+HTMLTableRowElement.AddressZip);
let salaryBonus = $('<tr>').text(' $ '+HTMLTableRowElement.SalaryBonus);
// append all table cells to a new row
let row = $('<tr>').append(fullNameTd).append(hireDate).append(fullAddress).append(salaryBonus); // create the row and append // all of the tr elements.
// replace the row on the table body
tbody.replaceWith(row);
In the click callback function you can pass in the event object. You are passing in HTMLTableRowElement and using it as a row element, which is incorrect. You can access the clicked row with $(this)[0], and inside the row you can access the individual cells.
Check out this plunker: link
For example to get the first and last name you need to get the first and second cell's text:
let fullNameTd = $('<tr>').text(thisRow.cells[0].innerText + ' ' + thisRow.cells[1].innerText);
Also the tbody.replaceWith(row); line will only work for the first time, because you are replacing the tbody with a row, so jquery will not find it for the second time. It's better to clear the tbody, and then append the row:
tbody.empty();
tbody.append(row);

Add checkbox to table created CSV to HTML

I am currently building a prototype tool for my company. I am not too familiar with javascript but I did manage to find and implement a CSV to HTML table. The code works, and everything pulls fine, but I want to add two new variables:
1) add a checkbox in a new first column
2) if checked sum up the values in the 7th and 8th columns
This is the CSV to HTML demo: https://derekeder.github.io/csv-to-html-table/
Github: https://github.com/derekeder/csv-to-html-table
I have completed a search and found the following but I do not know if/how it can be implemented.
$(window).load(function(){
$("table td:first-child").prepend('<input type="checkbox" class="basic-kpi- row"/>');
});//]]>
You could add the td containing your checkbox after the row is created on your csv_to_html_table.js file, specificaly after this line.
It could be something like
row_html += '<td><input type="checkbox" class="yourClass"></td>';
Also you would have to add an aditional th tag on the thead row here
The you could add an event listener for the inputs in order to trigger your calculations.
$('.yourClass').change(function(){
if (this.checked) {
//your code
}
});

Cannot add click to only one table row

When I execute the following to add a click function to the cell at the end of A particular row, jQuery adds the click function to all of the rows. What am I missing here please?
og_rownum happens to equal a number 3, not a string, and the nth-child(8) column does exist in the table.
$("#game_lister_table tr:eq("+og_rownum+"), :nth-child(8)").click(function(e){
alert('here');
e.stopPropagation();
});
Thanks in advance....
It seems like you want to add a listener to only one row on your table. If thats the case just add id="yourID" to the tag that you want to manipulate.
Then in jquery, select it with
$('#yourID').click(function(e){
//code here
});
If you don't know which row needs to be manipulated, and want to choose it programmatically, then try this.
$("#game_lister_table tr").click(function(e){
$(this)...//selects the row that was clicked
})
I used to to this code when choosing specific Cell/ Cells in HTML table Like You
$("#game_lister_table tr:eq("+og_rownum+"), :nth-child(8)").click(function(e){
alert('here');
e.stopPropagation();
});
But I found there is an easy way is to Create Dynamically Id for cell every time you create row or cell you have an Easy way to use JQuery Selector for any (row , cell ,....etc)
var table = document.getElementById("myTable");
var rowIndex =table.rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.id="whatEver";
cell1.innerHTML = "<input type="text" id="txt'+rowIndex+'" />";
then your action came Next
$('#ID').on('click',function(e){});
Since the closest answer was removed, I'll add this.
Use "#game_lister_table tr:eq("+og_rownum+") td:nth-child(8)" to select the element you described.

Categories