Add checkbox to table created CSV to HTML - javascript

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
}
});

Related

(Updated) Trying to edit the behaviour of toggle function in tablesorter with a nested table

(This post has been updated for clarity and more of my findings.)
I'm currently using the tablesorter functions toggle and tablesorter-childRow to make a table that has a child row that can be hidden and expanded by clicking 'toggle' on the primary row like this example. However, the child row contains a nested table where the first row also contains a toggle function that can hide or expand all the remaining rows of that nested table. Here is my table in action.
Currently, the toggle functions all work fine in the sense that they are able to hide and expand the rows that I want to. However, if I click on the primary row's toggle function (the row with Category I), the function expands the entire nested table. I would like the toggle function on the primary role to only expand the first row of the nested table only (the row with Category II).
For my script, I used the default script found on the cssChildRow configuration here. What I tried to do is to give the rows that I want expanded its own html class (in the fiddle they are marked with <td class="show">). Then I edited the to script function to .find('.show') instead of the default .find('td'), but this did not work. Does anyone have a solution?
Thanks for everyone's help! 😊
<script>
$(function() {
$('.tablesorter-childRow td').hide();
$(".tablesorter")
.tablesorter({
cssChildRow: "tablesorter-childRow"
})
$('.tablesorter').delegate('.toggle', 'click', function() {
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('.show').toggle();
return false;
});
});
</script>

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");

Inject a row after X number of rows in an HTML table

I display tables on a website with ±100 rows.
Is it possible to add a row after every 25 rows in order to display adcode?
Since new data are imported often from a csv file, I can't add these rows displaying the add at the same time.
This row will have to span across all columns. so I assume I can just add a very high number.
<tr><td colspan=100> DISPLAY ADD HERE </td></tr>
I'm using wordpress and ninja forms, though I don't think this will influence the way this is implemented. I just need to know is it possible with any plain HTMl table.
you can simply iterate through table rows using a loop and add the row in between. Below is a code snippet,
var i=0;
$('#table_name > tbody > tr').each(function() {
i++;
if (i%25==0) {
$(this).after("<tr><td colspan=100> DISPLAY ADD HERE </td></tr>")
}
});

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
}
});

Add table cell to existing table row, jQuery

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');

Categories