Develop Reference

How to delete specific table rows with javascript?

How can I delete specific table rows by giving up the row number in an input field?
The table I want to target: Complete code is linked below.
<table id="uitvoertabel" border="1">
<tr>
<th></th>
<th>Voornaam</th>
<th>Achternaam</th>
<th>Aantal punten</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Cruijff</td>
<td>54</td>
</tr>
<tr>
<td>2</td>
<td>Frans</td>
<td>Bauer</td>
<td>47</td>
</tr>
<tr>
<td>3</td>
<td>Selah</td>
<td>Sue</td>
<td>93</td>
</tr>
</table>
This is the complete code: https://jsfiddle.net/c6oLf8ye/1/

Pass the row number you want to delete like 0,1,2,3...
document.getElementById("uitvoertabel").deleteRow(0);
updated the same in: https://jsfiddle.net/3v2rdbmt/

Sorting table with rowspans

Is there a way to sort a table with multiple rowspans? I was trying a plugin in this jsFiddle, but it seems age does not get sorted correctly. Is there a way to sort an HTML table with rowspans? I need to have this table sorted with rowspan.
HTML
<table cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>28</td>
<td rowspan="2" style="vertical-align:middle">AAA</td>
</tr>
<tr class="expand-child">
<td>John</td>
<td>33</td>
</tr>
<tr>
<td>Clark</td>
<td>18</td>
<td>BBB</td>
</tr>
<tr>
<td>Bruce</td>
<td>22</td>
<td>CCC</td>
</tr>
</tbody>
</table>
JS
$('table').tablesorter();

It doesn't like your "expand-child" class. If you remove that, then it seems to sort just fine. What is that class doing?

Use Data-tables, it has all functionality: https://datatables.net/
$('.tablesorter').DataTable( {
"columnDefs": [ {
"targets": [ 0, 2 ],
"orderable": false
} ]
});

How to change values in a table using the DOM?

When using the DOM to edit a table, how do you edit the contents of a
specified cell?
I tried looking up different ways on w3Schools however console keeps giving me this message stating the values are null. Can somebody help?
This is the HTML for the table I am trying to edit:
<div id="courseSummaryContainer" class="tab">
<table cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
<thead><tr>
<th>Name</th>
<th>Description</th>
<th>Date of entry</th>
<th>Rating</th>
<th>Grade</th>
<th>Submission entry type</th>
</tr></thead>
<tbody>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
<td>Final</td>
</tr>
<tr class="row-odd">
<td>Alabama</td>
<td>Regional area health</td>
<td>201606</td>
<td>0100</td>
<td>7</td>
<td>Final</td>
</tr>
</tbody>
</table>
</div>
I tried:
document.getElementById("table.summaryTable.courseSummary.sm‌​allFontTable").rows[‌​0].cells; x[0].innerHTML = "NEW CONTENT";
but it didn't work.

Use id for table and try
<table cellspacing="0" id="courseSummaryContainer" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Date of entry</th>
<th>Rating</th>
<th>Grade</th>
<th>Submission entry type</th>
</tr>
</thead>
<tbody>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
<td>Final</td>
</tr>
<tr class="row-odd">
<td>Alabama</td>
<td>Regional area health</td>
<td>201606</td>
<td>0100</td>
<td>7</td>
<td>Final</td>
</tr>
</tbody>
</table>
<script>
var x = document.getElementById("courseSummaryContainer").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";
</script>

table.summaryTable.courseSummary.sm‌​allFontTable is not an ID for your table, so getElementById will not work.
That table has no ID, but it does have 3 CSS classes. Here's a tutorial on the difference.
See, also, the CSS Selectors reference at MDN.
So you can't use getElementById, but you can use document.querySelectorDoc.
Code as in the snippet below selects the first table, with the class courseSummary, that's contained by the courseSummaryContainer div.
Finally, avoid using innerHTML. Bad things come to those who do.
var csTable = document.querySelector ("#courseSummaryContainer table.courseSummary");
if (csTable) {
csTable.rows[0].cells[0].textContent = "NEW CONTENT";
}
td, th {
border: 1px solid gray;
padding: 0.2ex 1ex;
}
table { border-collapse: collapse;}
<div id="courseSummaryContainer" class="tab">
<table class="summaryTable courseSummary smallFontTable">
<thead><tr>
<th>Name</th>
<th>Description</th>
<th>Date of entry</th>
<th>Rating</th>
<th>Grade</th>
</tr></thead>
<tbody>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
</tr>
<tr class="row-odd">
<td>Alabama</td>
<td>Regional area health</td>
<td>201606</td>
<td>0100</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>

Sort table in HTML by column with date values desc using only javaScript

Is it possible to make sorting function using only javaScript, without any other library for sorting?
Let's say I have one table, and it's first column that has date values in this format: MM/dd/yyyy. Table has two more columns, like this:
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
<tr>
<td>07/08/2015</td>
<td>Test Name</td>
<td>Raven</td>
</tr>
<tr>
<td>05/04/2015</td>
<td>Test Name 4</td>
<td>Raven 3</td>
</tr>
<tr/>
<td>01/08/2017</td>
<td>Test Name 2</td>
<td>PCT</td>
</tr>
</thead>
</table>
Would it be possible to lets say add one button, and on click event sort rows by values in Date column?
I have to accomplish this using only plain javaScript and HTML, so no jQuery unfortunately :(

Here's a little something I whipped up to give you some ideas. Obviously you could extend this to sort by other data types.
I've "cheated" on the date comparisons by just changing the string format date directly to an eight-digit number in the form 20140312 from "12/03/2014" - note that I've assumed the date input format is dd/mm/yyyy, so if for some reason you're actually using mm/dd/yyyy you'll have to tweak the convertDate() function.
Also I've introduced a <tbody> into your table so that I can just sort the data rows and completely ignore the header row.
function convertDate(d) {
var p = d.split("/");
return +(p[2]+p[1]+p[0]);
}
function sortByDate() {
var tbody = document.querySelector("#results tbody");
// get trs as array for ease of use
var rows = [].slice.call(tbody.querySelectorAll("tr"));
rows.sort(function(a,b) {
return convertDate(a.cells[0].innerHTML) - convertDate(b.cells[0].innerHTML);
});
rows.forEach(function(v) {
tbody.appendChild(v); // note that .appendChild() *moves* elements
});
}
document.querySelector("button").addEventListener("click", sortByDate);
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody>
<tr>
<td>04/04/2015</td>
<td>Test Name 2</td>
<td>1</td>
</tr>
<tr>
<td>09/08/2017</td>
<td>Test Name 5</td>
<td>2</td>
</tr>
<tr>
<td>07/08/2015</td>
<td>Test Name 4</td>
<td>3</td>
</tr>
<tr>
<td>05/04/2015</td>
<td>Test Name 3</td>
<td>4</td>
</tr>
<tr>
<td>12/08/2017</td>
<td>Test Name 6</td>
<td>5</td>
</tr>
<tr>
<td>21/03/2014</td>
<td>Test Name 1</td>
<td>6</td>
</tr>
</tbody>
</table>
<button>Sort by date</button>

How to Auto fill a column using JavaScript?

I am trying to create a check list. How is it possible to automatically fill the "Check List Status" column using JavaScript?
What I want to do is, for example:
If document type is equal to client agreement than the check list status should be marked automatically as yes
if the document type is equal to blank than the status check list should automatically show up as No.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Asset Management Checklist Mockup</title>
<script type='text/javascript'>
var Check List Status ='checklist';
var Client Agreement = 'client';
var Document type = 'doctype';
if ('doctype'='client')
{
document.getElementById('checklist').innerHTML = 'Yes';
}
</script>
<style>
h1 {color:blue;}
h1 {text-align:center;}
h2 {color:blue;
text-align:center;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h1><em>Asset Management Department</em></h1>
<h2>Preview of automated report generation of <em>Documents Check List</em> on SharePoint.<h2>
<table style="width:100%">
<caption>Asset Management</caption>
<tr>
<th>Client Name</th>
<th>Portfolio Number</th>
<th>Portfolio Type</th>
<th id='doctype'>Document Type</th>
<th>Month</th>
<th>Year</th>
<th id='checklist'>Check List Status</th>
</tr>
<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='client'>Clinet Agreement</td>
<td>February</td>
<td>2001</td>
<th></th>
</tr>
<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='email'>Email</td>
<td>February</td>
<td>2001</td>
<th></th>
</tr>
<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='passport'>Passport Copy</td>
<td>February</td>
<td>2001</td>
<th></th>
</tr>
<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='nation'>Nationality</td>
<td>February</td>
<td>2001</td>
<th></th>
</tr>
<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td od='poa'>Proof of Address</td>
<td>February</td>
<td>2001</td>
<th></th>
</tr>
<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='home'>Home Address</td>
<td>February</td>
<td>2001</td>
<th></th>
</tr>
</tr>
<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='pa'>Postal Address</td>
<td>February</td>
<td>2001</td>
<th></th>
</tr>
<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='visa'>Visa Expiry Date</td>
<td>February</td>
<td>2001</td>
<th></th>
</tr>
<tr>
<td>Smith</td>
<td>101</td>
<td>ABC</td>
<td id='family'>Family Book</td>
<td>February</td>
<td>2001</td>
<th></th>
</tr>
</table>
</body>
</html>

Javascript variable names cannot contain spaces. Things like var Check List Status ='checklist'; will never work.
The expression if ('doctype'='client') will never be true. You are comparing two literal strings (doctype and client) that are clearly different.
you seemingly try to select the column with the id checklist and then set innerHTML to "yes". Because of 2. that code is never reached, but if it would, it would simply set the column header to "yes".
What you need to do is:
iterate the table row by row (document.querySelectorAll('#assets tr') gives you the rows)
for each row, find the "Document Type" cell (I have given them all the class identifier because classes can be used more than once per HTML page, ids not) and read its text content
If the text content is empty, find the cell in the "Check List Status" column (I have given them all the class check) and set it to "No". If it is "Client Agreement", set it to "Yes".
Here's the code:
var clientAgreement = 'Client Agreement';
var docTable = document.getElementById('assets');
var rows = document.querySelectorAll('#assets tr');
// iterate rows
for (var i = 1; i < rows.length; i++) {
// get cell for class "check"
var checkCell = rows[i].getElementsByClassName("check")[0];
var docTypeCell = rows[i].getElementsByClassName("identifier")[0];
if (docTypeCell.textContent === clientAgreement) {
checkCell.innerHTML = "Yes";
} else if (docTypeCell.textContent.length === 0) {
checkCell.innerHTML = "No";
}
}
And here's a JSBin example that also contains the edited HTML.

This will work;
function init(){
var trs = document.getElementsByTagName('table')[0].children[1].children;
var i;
for (i = 0; i < trs.length; i += 1) {
if (trs[i].children[3].innerHTML.indexOf('Clinet Agreement') > -1) {
trs[i].children[6].innerHTML = 'yes';
}
}
}
if you call it onload (<body onload="init();">) but you should add id and class attributes to your HTML to make it referenceable from JavaScript and thus more robust. Also your table needs a tbody tag.