We Keep Coding

Delete contents of table and replace using JavaScript

I am trying to delete the contents of a upon click and repopulate it based on what they are clicking.
I was able to succesfully modify the with the new title, but I keep running into issues when I want to delete the contents of and replace it with a new one. I've tried doing the removeChild(), the replaceChild(), as well as innerHTML (which doesn't work based on documentation).
How would I successfully on a click, remove the existing table and repopulate it with HTML generated from JavaScript.
HTML:
<table id="captable" border = "5" width="100%" cellpadding="4" cellspacing="5">
<thead>
<tr>
<th colspan="100%">
<div id="table-title"></div>
</th>
</tr>
<th>Input Date</th>
<th>Requested Date</th>
</thead>
<tbody id="tbodyid">
<div id="table-entries">
<tr align = "center">
<td>3/27/2018</td>
<td>6/12/2018</td>
</tr>
</div>
</tbody>
</table>
JavaScript:
function(evt) {
$("#table-title").html("<h2><b>" + Title + ":</b><i> " + Subtitle + "</i></h2>");
var tBodyInner;
for (i of dataPoints) {
console.log("data" + i);
var data = json.Data[i];
tBodyInner += ("<tr align = \"center\">");
tBodyInner += ("<td><a target=\"_blank\" href=" + data.cap_url + ">" + data.capNumber + "</a></td>");
tBodyInner += ("</tr>");
}
//Not sure what to do here so that I clear the existing table, and appened the new tBodyInner html as a replacement
modal.style.display = "block";
}

First of all, you have to get rid of <div id="table-entries">, this is not a valid location for a DIV.
Second, you need to initialize the variable tBodyInner to an empty string.
Finally, you can use $("#tbodyId").html() to fill in the HTML of the table body.
function(evt) {
$("#table-title").html("<h2><b>" + Title + ":</b><i> " + Subtitle + "</i></h2>");
var tBodyInner = "";
for (i of dataPoints) {
console.log("data" + i);
var data = json.Data[i];
tBodyInner += ("<tr align = \"center\">");
tBodyInner += ("<td><a target=\"_blank\" href=" + data.cap_url + ">" + data.capNumber + "</a></td>");
tBodyInner += ("</tr>");
}
$("#tBodyId").html(tBodyInner);
modal.style.display = "block";
}
<table id="captable" border="5" width="100%" cellpadding="4" cellspacing="5">
<thead>
<tr>
<th colspan="100%">
<div id="table-title"></div>
</th>
</tr>
<th>Input Date</th>
<th>Requested Date</th>
</thead>
<tbody id="tbodyid">
<tr align="center">
<td>3/27/2018</td>
<td>6/12/2018</td>
</tr>
</tbody>
</table>

Where do you exactly change the html inside the element? You are setting the variable tBodyInner, but never using it. You should use it like you updated the title above, for example:
$("#table-entries").html(tBodyInner);
Also the parentheses around the string concats on the right side are redundant. No harm, but no effect either.

Count unique values in html table

I'd like to count unique values in a html table.(RGB color)
I'm using a third-party website, which using PHP to write values in the table. I don't have access to the PHP script.
The PHP writes here "{colorcode}" a rgb-to-hex which I defined. I've 5 hex values:
fire: #FF8C00
medical help: #FD0202
hazardous materials: #19070B
other: #4876FF
technical assistance: #0000FF
My goal is, that I can count each color individually and write it in an other table.
Here's my website which shows the table: https://www.feuerwehr-forstern.de/einsaetze/
Table which I want to count.
<table>
<tr style="font-size:16px; background-color:#670200; color:#FFFFFF;">
<th><b>Nr.</b></th>
<th><b>Missionstart</b></th>
<th><b>Title</b></th>
<th><b>Kind of mission</b></th>
<th><b>Place</b></th>
<th></th>
</tr>{liststart}
<tr>
<td style="color:#FFFFFF;" bgcolor={colorcode}><b>{missionnr}</b></td>
<td>{startdate} {starttime}</td>
<td>{missiontitle}</td>
<td>{kind of mission}</td>
<td>{missionplace}</td>
<td><u>{linkreport}</u></td>
</tr>{listend}
</table>
Other table, where I want to write the result of counting after " : ".
<table>
<tr style="font-size:16px; color:#FFFFFF;">
<th style="background-color:#FF8C00;"><b>fire:</b></th>
<th style="background-color:#FD0202;"><b>medical help:</b></th>
<th style="background-color:#19070B;"><b>hazardous materials:</b></th>
<th style="background-color:#4876FF;"><b>other:</b></th>
<th style="background-color:#0000FF;"><b>technical assistance:</b></th>
</tr>
</table>

you can try this : var blue_count = $('[bgcolor=#0000FF]').length to get the count of the td elements that have the bgcolor attribute with the value of #0000FF . then you can append the count value where ever you want.
but this is just the idea for you to solve it... not the best way...
good luck

Here's the new Code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var orange_count = $('[bgcolor=#ff8c00]').size()
$(".important1").text("Brand: " + orange_count);
});
</script>
<script type="text/javascript">
$(function() {
var red_count = $('[bgcolor=#fd0202]').size()
$(".important2").text("First Responder: " + red_count);
});
</script>
<script type="text/javascript">
$(function() {
var black_count = $('[bgcolor=#19070b]').size()
$(".important3").text("Gefahrstoffe: " + black_count);
});
</script>
<script type="text/javascript">
$(function() {
var royalblue_count = $('[bgcolor=#4876ff]').size()
$(".important4").text("Sonstige: " + royalblue_count);
});
</script>
<script type="text/javascript">
$(function() {
var blue_count = $('[bgcolor=#0000FF]').size()
$(".important5").text("Technische Hilfeleistung: " + blue_count);
});
</script>
<table>
<tr style="font-size: 16px; color: #ffffff;">
<th style="background-color: #ff8c00;"><b class="important1">Brand</b></th>
<th style="background-color: #fd0202;"><b class="important2">First Responder</b></th>
<th style="background-color: #19070b;"><b class="important3">Gefahrstoffe</b></th>
<th style="background-color: #4876ff;"><b class="important4">Sonstige</b></th>
<th style="background-color: #0000ff;"><b class="important5">Technische Hilfeleistung</b></th>
</tr>
</table>

I've looked at your code and the link you provided in your question at top,
and in the link the color codes were all Uppercase like this : bgcolor="#4876FF"
so you can't get them with lowercase selectors like this: $('[bgcolor=#4876ff]').size()
you should fix that at first. and then, in every page you only need to check for the document.ready event once. so one of these will do the work :
$(function() {
});
just write your code in one of these blocks.
wish you luck...

Print something from JavaScript to a table in HTML/PHP page

I want to print out the result of a JavaScript function to a table in my HTML/PHP page. I tried using " document.write(player1Name);"
but it didn't work.
So when i input something into this text field
I want that result to be printed in this table
This is the code in my Hangman Home Page :
<form id="Player1" class="Player1">
<input type="text" id="playerOneName"/>
</form>
<form id="Player2" class="Player2">
<input type="text" id="playerTwoName"/>
</form>
<button id="Enter" class="Enter" type="button" onclick="navigateToDifficultyForMultiPlayer()">
<a>Enter</a>
</button>
This is the code in my Multi-player page for the table:
<TABLE BORDER="5" WIDTH="20%" CELLPADDING="5" CELLSPACING="2" id="Score-Board">
<TR>
<caption id="table-title">Score Board</caption>
</TH>
</TR>
<TR ALIGN="CENTER">
<TH colspan="2"> <script> document.write(player1Name);</script> </TH>
<TH colspan="2"><script> var player2Name </script></TH>
</TR>
<TR ALIGN="CENTER">
<TH colspan="2">score</TH>
<TH colspan="2">score</TH>
</TR>
</TABLE>
This is my JavaScript code I created to do what I want it to do (I think I have done it right):
function navigateToDifficultyForMultiPlayer() {
//set player names in session
setPlayerNames();
//navigate to DifficultyForMultiPlayer page
location.href = "DifficultyForMultiPlayer.html";
}
function setPlayerNames() {
var firstPlayerName = document.getElementById("playerOneName").value;
var secondPlayerName = document.getElementById("playerTwoName").value;
console.log(firstPlayerName + " " + secondPlayerName);
sessionStorage.setItem("Player1Name", firstPlayerName);
sessionStorage.setItem("Player2Name", secondPlayerName);
}
function getPlayerNames(){
player1Name = sessionStorage.getItem("Player1Name");
player2Name = sessionStorage.getItem("Player2Name");
console.log(player1Name + " " + player2Name);
}
And this is the JavaScript that's being called globally :
var player1Name;
var player2Name;
I hope everyone can understand what I am trying to ask. Please don't hesitate to tell me if there is something wrong with my question. I tried my best to ask the question properly, FYI English isn't my first language

What you want to do is in this html:
<TR ALIGN="CENTER">
<TH colspan="2"> <script> document.write(player1Name);</script> </TH>
<TH colspan="2"><script> var player2Name </script></TH>
</TR>
add an ID to your th elements:
<TH colspan="2" id="player1"> // and remove the script
Then, in your javascript, possibly in your getPlayerNames function:
document.getElementById("player1").text(player1Name);
And then do the same for player2.

You can give your <th> tags for the players ids like player1 and player2. Then at the end of your <body> for the Multi-player page you can put a <script> tag that does something like:
<script>
(function() {
document.getElementById("player1").innerHTML = player1Name;
document.getElementById("player2").innerHTML = player2Name;
})();
</script>
The document.getElementById grabs the DOM element that you want and then .innerHTML changes what is within that tag. Putting this right before end of the body tag will make sure the html elements are loaded first before trying to access them.

Edit a specified cell in a table - jsp

I need some help with javascript/jquery or ajax.
A am writing a java web app and have question regarding table.
I need to have the possibility to edit one (and only one specified cell). In this case I have the "status" field. When clicking on the value I'd like to have a dropdown list with 2 possibilities to choice: "active" and "passive".
I tried to figure it out, but without success.
Here is my code:
<body>
<table border = "1">
<tr>
<td>name</td>
<td>surname</td>
<td>status</td>
</tr>
<tr>
<td> Adam</td>
<td>Smith</td>
<td id = "status" onclick = "update(this.id)">active</td>
</tr>
</table>
<script type = "text/javascript">
function update(id){
var content = document.getElementById(id).firstChild.nodeValue;
document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
}
</script>
</body>
In this case when I click on the cell the value changes to "null" and it is not editable anymore.

You want to do something like this:
<td>
<input
type='text'
name='txtNewInput'
id='txtNewInput'
value='<c:out value="${person.status}" />'
onChange='AjaxCallToUpdateDB(this.id, this.value)'
/>
</td>
Actually sending the update to the database when the user makes a change requires more than making this an input: you need an Ajax call to a Servlet to save the value in the database.

Getting Value From Table TR id and TD id

I have problems getting id from tr and td in my table.
Let's say I have a table like this:
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
I want to getting id from TR and id FROM td for each tr clicked in specific table (table_tingkat_jual).
This is my syntax in jQuery:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
But when I clicked the row in that table, nothing happened. What I want is alert me the id. (See the alert function).
What's wrong?

Update from chat:
It turns out the problem is that the table is loaded dynamically via ajax, so a delegated event is needed (in addition to the other fixes):
$(document).on('click', '#table_tingkat_jual tr', function (e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
Previous details:
There are several issues, not the least of which is the use of duplicate ID's in the HTML (which is invalid).
You also do not need separate, identical, selectors to handle stopPropogation (assuming you actually need stopPropogation at all (e.g. to avoid clicks in parent objects).
It appears you also want to drill down for the TD values, so try this:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/fw5ty/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
data('id') is a short-cut for attr('data-id').
note I have changed your HTML to use data-id attributes instead of id= so that duplicate values are allowable.
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='1'>1</td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='3'>3</td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
If you really must use duplicate ID's (which I strongly recommend you fix) use this code instead:
http://jsfiddle.net/TrueBlueAussie/fw5ty/1/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $this.find('td[id]').attr('id');
alert("TD ID " + tdid);
});

you have two elements with the same id:
<tr id='0'>
id should be unique. Use a class if you want both to be 0, or assign one a different value.

The issue is that .closest starts looking from the target element and up, not down on the DOM tree, and since your event is on tr it never gets to the td, that's why you always get undefined, if what you want is to get the id of the first td with one, try using .find():
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).find('td[id]').attr('id');
alert("TD ID " + tdid);
});
Sample fiddle
Also I'd get rid of:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
And finally, you're not supposed to have repeated id attributes on html, so you should change those or use a data attribute or a class instead.

Maybe you forgot to include jquery?
I just included jQuery from google and let the script wait until the document is completly loaded.
I also gave the different ids, but that was not the problem i think.
I also recommend giving all the an ID, because now he alerts undefined ID.
For me it works like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
});
</script>
</head>
<body>
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr id='0'>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='2'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
<body>
</html>
Hope it helps.