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.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
const firstTable = document.getElementById('table_1')
const secondTable = document.getElementById('table_2')
const rows1 = firstTable.rows
const rows2 = secondTable.rows
for (let i = 0; i < rows1.length; i++) {
for (let x in rows1[i].cells) {
let col = rows1[i].cells[x]
console.log(col)
}
for (let j = 0; j < rows2.length; j++) {
}
}
table {
border: 1px solid black;
}
td {
border: 1px solid black;
}
<table id="table_1">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>per</td>
<td style="background-color:red">27</td>
</tr>
<tr>
<td>2</td>
<td>Tom</td>
<td>25</td>
</tr>
<tr>
<td>notexist</td>
<td></td>
<td></td>
</tr>
</table>
<table id="table_2">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>per</td>
<td style="background-color:green">25</td>
</tr>
<tr>
<td>2</td>
<td>Tom</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>alex</td>
<td>33</td>
</tr>
</table>
I need to compare these two tables dynamically in javascript to get the result like the tables I put in the code. I need to compare every cell in every row if ids are equal. If id doesn't exist in the second table I need to write this not exist. For example, I put age in the first row of the first table not equal age in the second row of the second table. If Not equal, style background color to red or green.
from the DOM table, if they are identical(structure), you can make a loop on the TDs of one of them and compare textContent to the other standing at the same position:
here is an example
const firstTable = document.querySelectorAll("#table1 td");
const secondTable = document.querySelectorAll("#table2 td");
// loop on one of the table if both are of identical structure, else it is pointless
for (let i = 0; i < firstTable.length; i++) {
if (firstTable[i].textContent !== secondTable[i].textContent) {
firstTable[i].classList.add('redbg');// here do what you need to when not equal
}
// else { /* do what you need to if equal*/ }
}
.redbg {
background: red;
}
<table id="table1">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>per</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>Tom</td>
<td>25</td>
</tr>
<tr>
<td>notexist</td>
<td></td>
<td></td>
</tr>
</table>
<table id="table2">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>per</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Tom</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>alex</td>
<td>33</td>
</tr>
</table>
from your array, idea can be the same loop on the first one and check if firstone and second got the same content at the same position, and add the class while building the table.
I am creating a HTML table dynamically and I want the headers to include data-reverse attribute in order to allow reverse sorting by pushing table headers:
<table>
<thead>
<tr>
<th data-reverse="true">Name</th>
<th data-reverse="true">Surname</th>
<th data-reverse="true">Age</th</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>62</td>
</tr>
<tr>
<td>Dylan</td>
<td>Jones</td>
<td>37</td>
</tr>
<tr>
<td>Alan</td>
<td>Shearer</td>
<td>55</td>
</tr>
<tr>
<td>Ringo</td>
<td>Starr</td>
<td>52</td>
</tr>
</tbody>
</table>
The code slice is below. I am wondering what should be corrected in the addRow() function in order to produce the above output with data-reverse="true" attribute?
Or somewhere else.
addRow(thead, "th");
fragment.appendChild(thead);
function addRow(dom, tag) {
for(j=1;j<rowArray.length;j++){
var el = doc.createElement(tag);
el.setAttribute(data-reverse,"true");
el.innerHTML = rowArray[j];
tr.appendChild(el);
dom.appendChild(tr);
}
}
I have problem to hide the table is follow the Category/Cabinet number are range 100-199 and range 400-499.
Below is my example coding to describe, these example have 3 table, how to detect if range 100-199 and range 400-499 in the Category/Cabinet then hide the table:
<table id="noshow">
<tr>
<th>Test 1</th>
<th>Test 2</th>
</tr>
<tr>
<td>Title</td>
<td>ABC</td>
</tr>
<tr>
<td>Reference No.</td>
<td>123456</td>
</tr>
<tr>
<td>Date</td>
<td>28-05-2020</td>
</tr>
<tr>
<td>Category/Cabinet</td>
<td>187-1-PENTADBIRAN</td>
</tr>
<tr>
<td>Subcategory/Folder</td>
<td>187-1-1-PENTADBIRAN/PERUNDANGAN</td>
</tr>
</table>
<br><br>
<table id="noshow">
<tr>
<th>Test 3</th>
<th>Test 4</th>
</tr>
<tr>
<td>Title</td>
<td>DEF</td>
</tr>
<tr>
<td>Reference No.</td>
<td>123</td>
</tr>
<tr>
<td>Date</td>
<td>27-05-2020</td>
</tr>
<tr>
<td>Category/Cabinet</td>
<td>356-1-PENTADBIRAN</td>
</tr>
<tr>
<td>Subcategory/Folder</td>
<td>356-1-1-PENTADBIRAN/PERUNDANGAN</td>
</tr>
</table>
<br><br>
<table id="noshow">
<tr>
<th>Test 5</th>
<th>Test 6</th>
</tr>
<tr>
<td>Title</td>
<td>GHI</td>
</tr>
<tr>
<td>Reference No.</td>
<td>8888</td>
</tr>
<tr>
<td>Date</td>
<td>23-05-2020</td>
</tr>
<tr>
<td>Category/Cabinet</td>
<td>466-1-PENTADBIRAN</td>
</tr>
<tr>
<td>Subcategory/Folder</td>
<td>466-1-1-PENTADBIRAN/PERUNDANGAN</td>
</tr>
</table>
I have using below the javascirpt to solve, but can't hide the table:
$(document).ready(function(){
$('#noshow').each(function(k,v){
var number=$(v).text().split('-')[0];
console.log(number,$(v).text());
if((number >= 100 && number <= 199)||(number >= 400 && number <= 499)){
console.log("remove");
$(v).remove();
}
});
});
My output like below the picture:
If success, the result only left not range 100-199 and range 400-499 to show the table like below the picture:
If possible using the javascript function to hide the data?Hope someone can guide me how to hide the table according the Category/Cabinet number are range 100-199 and range 400-499. Thanks.
Try this
$('.noshow tr td').each(function (k, v) {
var title = $(v).text();
if (title === 'Category/Cabinet') {
var number = parseInt($(this).next().text().split('-')[0])
if ((number >= 100 && number <= 199) || (number >= 400 && number <= 499)) {
$(this).closest('.noshow').remove();
}
}
});
Also change noShow to class and not id, as we should not have multiple id with same name in the dom
Here is a working jsfiddle
I am new to web development. I have a table with a simple structure. Here, I want to find a tr containing a td value "abc" and then add the class to that tr. I am able to add it to td but not to the tr . Please help.
var container = document.querySelector("[id^='taTextElement']").id;
var match = "Duration";
$('#'+container +' ' +'table tr').each(function() { }
One more thing here, table Id is also there.So, can anyone please help me with this ?
Here I have not added the ID part.
HTML -
<table border="1"> <tbody><tr><td> Designation :</td><td></td></tr><tr><td> Duration :</td><td>JANUARY 2015 to APRIL 2015</td></tr><tr><td> Technologies : </td><td>Tritium, Sublime Text, Firefox, Chrome, Action Script, HTML, CSS, Javascript, jQuery</td></tr><tr><td> Team Size: </td><td></td></tr><tr><td> URl : </td><td></td></tr><tr><td> Employer :</td><td></td></tr><tr><td> Client : </td><td></td></tr><tr><td> Domain : </td><td></td></tr><tr><td> Roles and responsibility : </td><td>Contribution: Using Client API in this project had to fix many issues while mobilizing the desktop site Code validation, Unit testing, Manual testing done for every task. </td></tr><tr><td> Description: </td><td>Description: As a part of this project we were mobilize the desktop websites.
</td></tr></tbody></table>
You can use :contains selector like:
$(function() {
var toSearch = "Island"; /* Word to seach */
$("#table1 td:contains(" + toSearch + ")").parent().addClass('selected');
});
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;
}
.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
For exact search, you can use filter
You can use:
var toSearch = "Francisco Chang"; /* Word to seach */
$("#table1 td").filter(function(){ return $(this).text().trim() === toSearch }).parent().addClass('selected');
If you are able to select the td, you can use the jQuery.parent () method to get the tr and add the class.
So in your .each function
var tds = $(this).children ().filter (function(){return $(this).text () == 'abc';});
tds.each (function (){
$(this).addClass (yourClass) ;
$(this).parent ().addClass (trClass);
});
As a comparison, you can do this in POJS by:
Getting the cells in the table as an array (or NodeList with forEach, see below)
Loop over the cells and add a 'highlight' class to rows that contain matching text
Since most browsers now implement forEach on NodeLists, you can call it on the NodeList returned by querySelectorAll. Otherwise, you may need to convert the NodeList to an array first (e.g. use Array.from(NodeList)).
function highlighTRWithText(text) {
document.querySelectorAll('#table0 td')
.forEach(cell => {
if (cell.textContent.indexOf(text) > -1) cell.parentNode.classList.add('highlight');
});
}
window.onload = function(){
highlighTRWithText('Team Size');
}
.highlight {
background-color: red;
}
<table id="table0" border="1">
<tbody>
<tr>
<td> Designation :</td>
<td></td>
</tr>
<tr>
<td> Duration :</td>
<td>JANUARY 2015 to APRIL 2015</td>
</tr>
<tr>
<td> Technologies : </td>
<td>Tritium, Sublime Text, Firefox, Chrome, Action Script, HTML, CSS, Javascript, jQuery</td>
</tr>
<tr>
<td> Team Size: </td>
<td></td>
</tr>
<tr>
<td> URl : </td>
<td></td>
</tr>
<tr>
<td> Employer :</td>
<td></td>
</tr>
<tr>
<td> Client : </td>
<td></td>
</tr>
<tr>
<td> Domain : </td>
<td></td>
</tr>
<tr>
<td> Roles and responsibility : </td>
<td>Contribution: Using Client API in this project had to fix many issues while mobilizing the desktop site Code validation, Unit testing, Manual testing
done for every task. </td>
</tr>
<tr>
<td> Description: </td>
<td>Description: As a part of this project we were mobilize the desktop websites.
</td>
</tr>
</tbody>
</table>
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.smallFontTable").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.smallFontTable 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>