For a Chrome plugin, I need to retrieve messages. These messages are supplied to me through an html variable.
There are 2 messages in the example provided below and they both start with: <tr bgcolor="#FFFFFF"> and end with: </tr>
I retrieved the first message data, but now I need to make it so that it retrieves all the data from each of those <tr bgcolor="#FFFFFF"> </tr> messages.
What I get provided:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="xxx">
<title>Untitled</title>
</head>
<body class="bodySinScrollHor">
<table width="95%" align="center">
<tr>
<td class="etiquetaIzquierda" colspan=6>
<a class="etiquetaIzquierda"><img border=0 height=15 src="xxx"> Comunicaciones (2)</a>
</td>
</td>
</tr>
<tr>
<td colspan=6>
<hr size=1 width="100%">
</td>
</tr>
<tr id="comunicaciones">
<td colspan=6>
<table width="100%" border=0 bordercolor="#000000" cellspacing=0 cellpadding=0>
<tr bgcolor="#FFFFFF">
<td width="9%" class="valorCampoSinTamFijoPeque">2017-08-31T00:00:00</td>
<td width="9%" class="valorCampoSinTamFijoPeque">13:22</td>
<td width="4%" align=left class="valorcampoSinTamFijoPeque">
<img src="xxx" title=" Out">
</td>
<td width="11%" class="valorCampoSinTamFijoPeque" valign=top>
<font class="valorcampoSinTamFijoPeque"><a title="clientname" class="valorcampoSinTamFijoPeque">ClientName</a></font>
</td>
<td width="14%" class="valorCampoSinTamFijoPeque" width="100%">Subject</td>
<!-- <td width="61%"class="valorCampoSinTamFijoPeque">message text here</td> -->
</tr>
<tr bgcolor="#FFFFFF">
<td width="9%" class="valorCampoSinTamFijoPeque">2017-08-31T00:00:00</td>
<td width="9%" class="valorCampoSinTamFijoPeque">13:21</td>
<td width="4%" align=left class="valorcampoSinTamFijoPeque">
<img src="xxx" title=" Out">
</td>
<td width="11%" class="valorCampoSinTamFijoPeque" valign=top>
<font class="valorcampoSinTamFijoPeque"><a title="clientname" class="valorcampoSinTamFijoPeque">ClientName</a></font>
</td>
<td width="14%" class="valorCampoSinTamFijoPeque" width="100%">Subject</td>
<!-- <td width="61%"class="valorCampoSinTamFijoPeque">Message Text Here</td> -->
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Below is the code I run to retrieve the data from the first message. Note that there are 2 messages in this case, but there are people that have 54 messages so it needs to loop that many times. This part of the code:
var count = (html1.match(/<tr bgcolor="#FFFFFF">/g) || []).length;
console.log(count);
Is what provides that number for me.
matches[0].forEach(function(match, index) {
var cleintcode = /<div\s*class="t_seg_codCliente">(.*?)<\/div>/.exec(match)[1];
var cleintname = /<div\s*class="t_seg_nomCliente">(.*?)<\/div>/.exec(match)[1];
var taxId = /<div\s*class="t_seg_nifCliente">(.*?)<\/div>/.exec(match)[1];
var date = /<div\s*class="t_seg_fechaPresCliente">(.*?)<\/div>/.exec(match)[1];
var state = /<div\s*class="t_seg_estadoCliente">(.*?)<\/div>/.exec(match)[1];
var expirydate = /<div\s*class="t_seg_fechaCadCliente">(.*?)<\/div>/.exec(match)[1];
var communications = /<div\s*class="t_seg_comCliente"><a .*;">(.*?)<\/a>/.exec(match)[1];
var comclient = /<div\s*class="t_seg_comCliente"><a href="javaScript:popupComs\('(.*?)'/.exec(match)[1];
var messages = "xxx" + comclient;
var html1 = httpGet(messages);
//console.log(html1);
const cleanupDocString = html1.replace(/(?:<!--|-->)/gm, '');
parser = new DOMParser();
htmlDoc = parser.parseFromString(cleanupDocString, "text/html");
//console.log(htmlDoc);
var communicationsvalue = htmlDoc.getElementsByClassName("valorCampoSinTamFijoPeque")[0].textContent;
if (communicationsvalue.indexOf('No existen comunicaciones asociadas a este cliente.') !== -1) {
console.log("This chat does not contain any communiction!");
} else {
//Get count of regex matches. (amount of messages)
var count = (html1.match(/<tr bgcolor="#FFFFFF">/g) || []).length;
console.log(count);
var comDate = htmlDoc.getElementsByClassName("valorCampoSinTamFijoPeque")[0].textContent;
var comTime = htmlDoc.getElementsByClassName("valorCampoSinTamFijoPeque")[1].textContent;
var comType = htmlDoc.getElementsByTagName('img')[1].src;
var comClient = htmlDoc.getElementsByTagName('a')[1].textContent;
var comSubject = htmlDoc.getElementsByClassName("valorCampoSinTamFijoPeque")[6].textContent;
const element = htmlDoc.getElementsByClassName('valorCampoSinTamFijoPeque')[7];
var pulledMessage = element.innerHTML;
var messageData = [{
clientCode: cleintcode,
clientName: cleintname,
taxID: taxId,
cleintDate: date,
cleintState: state,
cleintExpirydate: expirydate
},
{
mesDate: comDate,
mesTime: comTime,
mesType: comType,
mesClient: comClient,
mesSubject: comSubject,
mesText: pulledMessage
}
];
console.log(messageData);
}
});
The code above gives me this console log:
1. 0:
1. cleintDate:"31/08/17"
2. cleintExpirydate:"29/11/17"
3. cleintState:"Subject"
4. clientCode:"xxxxxx"
5. clientName:"clientName"
6. taxID:""
7. __proto__:Object
2. 1:
1. mesClient:"ClientName"
2. mesDate:"2017-08-31T00:00:00"
3. mesSubject:"Subject "
4. mesText:"Message text Here"
5. mesTime:"13:22"
6. mesType:"link"
7. __proto__:Object
Note that array 0 should not change because these messages are from the same person. I just need to grab the second message as well. So I technically need a second array like array 1 containing the data from the second message.
Wanted result:
1. 0:
1. cleintDate:"31/08/17"
2. cleintExpirydate:"29/11/17"
3. cleintState:"Subject"
4. clientCode:"xxxxxx"
5. clientName:"clientName"
6. taxID:""
7. __proto__:Object
2. 1:
1. mesClient:"ClientName"
2. mesDate:"2017-08-31T00:00:00"
3. mesSubject:"Subject "
4. mesText:"Message text Here"
5. mesTime:"13:22"
6. mesType:"link"
7. __proto__:Object
3. 3:
1. mesClient:"ClientName"
2. mesDate:"2017-08-31T00:00:00"
3. mesSubject:"Subject "
4. mesText:"Message text Here"
5. mesTime:"13:22"
6. mesType:"link"
7. __proto__:Object
I know I have to build a for loop, but I have no idea on how do this, so it looks for the second <tr bgcolor="#FFFFFF"> </tr> after the first.
Content is slightly edited to hide personal information.
You may possibly do as follows;
var data = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="STYLESHEET" type="text/css" href="xxx"> <title>Untitled</title> </head> <body class="bodySinScrollHor"> <table width="95%" align="center"> <tr> <td class="etiquetaIzquierda" colspan=6> <a class="etiquetaIzquierda"><img border=0 height=15 src="xxx"> Comunicaciones (2)</a> </td> </td> </tr> <tr> <td colspan=6> <hr size=1 width="100%"> </td> </tr> <tr id="comunicaciones"> <td colspan=6> <table width="100%" border=0 bordercolor="#000000" cellspacing=0 cellpadding=0> <tr bgcolor="#FFFFFF"> <td width="9%" class="valorCampoSinTamFijoPeque">2017-08-31T00:00:00</td> <td width="9%" class="valorCampoSinTamFijoPeque">13:22</td> <td width="4%" align=left class="valorcampoSinTamFijoPeque"> <img src="xxx" title=" Out"> </td> <td width="11%" class="valorCampoSinTamFijoPeque" valign=top> <font class="valorcampoSinTamFijoPeque"><a title="clientname" class="valorcampoSinTamFijoPeque">ClientName</a></font> </td> <td width="14%" class="valorCampoSinTamFijoPeque" width="100%">Subject</td> <!-- <td width="61%"class="valorCampoSinTamFijoPeque">message text here</td> --> </tr> <tr bgcolor="#FFFFFF"> <td width="9%" class="valorCampoSinTamFijoPeque">2017-08-31T00:00:00</td> <td width="9%" class="valorCampoSinTamFijoPeque">13:21</td> <td width="4%" align=left class="valorcampoSinTamFijoPeque"> <img src="xxx" title=" Out"> </td> <td width="11%" class="valorCampoSinTamFijoPeque" valign=top> <font class="valorcampoSinTamFijoPeque"><a title="clientname" class="valorcampoSinTamFijoPeque">ClientName</a></font> </td> <td width="14%" class="valorCampoSinTamFijoPeque" width="100%">Subject</td> <!-- <td width="61%"class="valorCampoSinTamFijoPeque">Message Text Here</td> --> </tr> </td> </tr> </table> </td> </tr> </table> </body> </html>';
var adiv = document.createElement("div"),
msgs = [],
trs;
adiv.innerHTML = data;
trs = adiv.querySelectorAll('tr[bgcolor="#FFFFFF"]');
trs.forEach(function(tr){
var d = [];
tr.querySelectorAll("td")
.forEach(function(td){
var img = td.querySelector("img"),
src = img && img.attributes.getNamedItem("src").value;
d.push(src || td.textContent);
});
msgs.push(d);
});
console.log(msgs);
Are you looking for this?
var trs = $('tr[bgcolor="#FFFFFF"]');
var output = [];
for(var i=0;i<trs.length;i++){
var currentOutput = {};
currentOutput.cleintDate=trs.eq(i).find("td").eq(0).text();
//other properties like this
currentOutput.cleintExpirydate=trs.eq(i).find("td").eq(1).text();
//add all your required properties
output.push(currentOutput);
}
console.log(output)
Without jquery
var trs = document.querySelectorAll('tr[bgcolor="#FFFFFF"]');
var output = [];
for(var i=0;i<trs.length;i++){
var currentOutput = {};
currentOutput.cleintDate=trs[i].getElementsByTagName('td')[0].innerText;
//other properties like this
currentOutput.cleintExpirydate=trs[i].getElementsByTagName('td')[0].innerText;
//add all your required properties
output.push(currentOutput);
}
console.log(output)
Related
I have long html text. Pass it from js to php. I need change ID content with my text.
I tried did it like this:
$html = new DOMDocument();
$html->loadHTML($codeText);
$html->getElementById('second_head')->nodeValue = $leadAddressTemplate;
$html->getElementById('rechnung_div')->nodeValue = $rehnungTemplate;
$res = $html->saveHTML();
It works but have problem - my <> chars system replaces to < and > and system adds <html><body> to my text.
How can I fix it? Maybe there are some flags for it?
For example, input is :
<tr>
<td colspan="2" class="invoice-products" width="100%">
<div id="rechnung_div"></div>
</td>
</tr>
And it try do it:
$html->getElementById('rechnung_div')->nodeValue = '<p>It is rechnung</p>';
As result i have this:
<tr>
<td colspan="2" class="invoice-products" width="100%">
<div id="rechnung_div"><p>It is rechnung</p></div>
</td>
</tr>
Now I can set for example element:
$appended = $html->createElement('p', 'It is rechnung');
$html->getElementById('rechnung_div')->nodeValue = '';
$rechnung_div->appendChild($appended);
But how insert table , for example like this?
<table>
<tbody><tr>
<td style="width: 40%;vertical-align: baseline;"><h1 id="invoice_type">Rechnung</h1>
<p id="invoice_title">gtrgtrgrtgtr</p></td>
<td style="width: 60%;text-align: right;vertical-align: bottom;"><h1> </h1><p id="invoice_nummer"></p></td>
</tr>
</tbody>
</table>
I can't do it with appendChild() function
Rolling together the notes from the comments:
$parent = <<<_E_
<tr>
<td colspan="2" class="invoice-products" width="100%">
<div id="rechnung_div"></div>
</td>
</tr>
_E_;
$template = <<<_E_
<p>I am a template</p>
_E_;
$temp = new DOMDocument();
$temp->loadHTML($template, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
// get the document's root element
$temp_root = $temp->documentElement;
$html = new DOMDocument();
$html->loadHTML($parent, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
// import the template into the current document
$node = $html->importNode($temp_root, true);
$html->getElementById('rechnung_div')->appendChild($node);
echo $html->saveHTML();
Output:
<tr>
<td colspan="2" class="invoice-products" width="100%">
<div id="rechnung_div"><p>I am a template</p></div>
</td>
</tr>
I tried to design an js algorithm that overrites to existing HTML on my product detail page. This is required after XML integration to my website i want to visualize this specs as table but after XML integration it only allows to store on my website as paragraph tags of HTML.
So;
Here is my code that works exactly well on codepen but not on my wordpress website.
JS
var a,b,c,d,e,f;
var bazes = document.getElementById("prd-desc").getElementsByTagName("div")[0].getElementsByTagName("p") ;
var bazes_t = document.getElementById("prd-desc").getElementsByTagName("div")[0];
a = bazes[0].innerText;
b = bazes[1].innerText;
c = bazes[2].innerText;
d = bazes[3].innerText;
e = bazes[4].innerText;
f = bazes[6].innerText;
//console.log(c);
bazes_t.innerHTML = '<div class ="outer-box"> <table id="urun_inf"> <tr> <td class="col1-head"> Kod </td> <td class="col2-desc">a</td> </tr> <tr> <td class="col1-head"> Ebat </td> <td class="col2-desc"> Açıklama2 </td> </tr> <tr> <td class="col1-head"> Reklam Alanı</td> <td class="col2-desc"> Açıklama3 </td> </tr> <tr> <td class="col1-head"> Renk </td> <td class="col2-desc"> Açıklama4 </td> </tr> <tr> <td class="col1-head"> Merkez Stok </td> <td class="col2-desc"> Açıklama5 </td> </tr> <tr> <td class="col1-head"> Toplam Stok </td> <td class="col2-desc"> Açıklama6 </td> </tr> </table> </div><style> .outer-box{ border : 2px solid; border-style : groove; width : %100; height : auto;}.col1-head,.col2-head{ font-weight : bold; color : blue;}.col1-desc::before,.col2-desc::before{ content : ":";}</style>';
console.log(bazes_t.getElementsByTagName("td")[1].innerText);
bazes_t.getElementsByTagName("td")[1].innerText = a;
bazes_t.getElementsByTagName("td")[3].innerText = b;
bazes_t.getElementsByTagName("td")[5].innerText = c;
bazes_t.getElementsByTagName("td")[7].innerText = d;
bazes_t.getElementsByTagName("td")[9].innerText = e;
bazes_t.getElementsByTagName("td")[11].innerText =f;
<div data-id="6f6ba5e" class="elementor-element elementor-element-6f6ba5e elementor-widget elementor-widget-product-description" id="prd-desc" data-element_type="product-description.default">
<div class="elementor-widget-container">
<p>Lacivert</p>
<p>Bisiklet Yaka Lacivert Tişört</p>
<p>M Beden</p>
<p>1458</p>
<p>1458</p>
<p> </p>
<p>* %100 Pamuklu * 30/1 Süprem Kumaş * İstenilen renk ve bedenlerde dikim yapılır * Yandan Dikişli * 145 gr.</p>
</div>
</div>
So this code looks great on codepen or here. I implement this code on my OceanWP wordpress website by Elementor to "Single Product Page of Woocommerce" I can re-design this page with a plugin. ( It allows me to add an elementor custom HTML to this page and i implement this code there within 'script /script' tags)
Every product has unique specs so that this JS must be take data for each product page and display it as table like the code above.
Many thanks in advance,
C.
Not sure what you want to do with this code, just change your javascript code (just need to add window.onload and it should work.
window.onload = function(){
var a,b,c,d,e,f;
var bazes = document.getElementById("prd-desc").getElementsByTagName("div")[0].getElementsByTagName("p");
var bazes_t = document.getElementById("prd-desc").getElementsByTagName("div")[0];
a = bazes[0].innerText;
b = bazes[1].innerText;
c = bazes[2].innerText;
d = bazes[3].innerText;
e = bazes[4].innerText;
f = bazes[6].innerText;
//console.log(c);
bazes_t.innerHTML = '<div class ="outer-box"> <table id="urun_inf"> <tr> <td class="col1-head"> Kod </td> <td class="col2-desc">a</td> </tr> <tr> <td class="col1-head"> Ebat </td> <td class="col2-desc"> Açıklama2 </td> </tr> <tr> <td class="col1-head"> Reklam Alanı</td> <td class="col2-desc"> Açıklama3 </td> </tr> <tr> <td class="col1-head"> Renk </td> <td class="col2-desc"> Açıklama4 </td> </tr> <tr> <td class="col1-head"> Merkez Stok </td> <td class="col2-desc"> Açıklama5 </td> </tr> <tr> <td class="col1-head"> Toplam Stok </td> <td class="col2-desc"> Açıklama6 </td> </tr> </table> </div><style> .outer-box{ border : 2px solid; border-style : groove; width : %100; height : auto;}.col1-head,.col2-head{ font-weight : bold; color : blue;}.col1-desc::before,.col2-desc::before{ content : ":";}</style>';
console.log(bazes_t.getElementsByTagName("td")[1].innerText);
bazes_t.getElementsByTagName("td")[1].innerText = a;
bazes_t.getElementsByTagName("td")[3].innerText = b;
bazes_t.getElementsByTagName("td")[5].innerText = c;
bazes_t.getElementsByTagName("td")[7].innerText = d;
bazes_t.getElementsByTagName("td")[9].innerText = e;
bazes_t.getElementsByTagName("td")[11].innerText =f;
}
I have the following HTML Table,
<table id="items">
<tr class="total_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value" id="total"><div id="totalone">$875.00</div></td>
</tr>
<tr class="disc" id="disc">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Discount</td>
<td class="total-value" id="discount"><div id="discountid"><input type="text" name="disco" class="dis"/></div> </td>
</tr>
<tr class="tax_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">tax</td>
<td class="total-value" id="tax"><div id="tax">00</div></td>
</tr>
</table>
When i click on the button with id Discount, I need to change the value to the TD inside the div Tag with id "total" and set its value to another JavaScript variable?I tried the following, but it's not working.
$(".discountbtn").click(function(){
var test=$("#items #disc .dis").val(); //Easiest method
console.log("lol");
console.log(test);
var tot = roundNumber(test,2);
var new_tot=window.finale-tot;
console.log(window.finale);
console.log(new_tot);
$('#items #totalone').html("$"+new_tot);
//alert("button");
});
Try with my code that help you
change HTML <div id="totalone">$875.00</div> to $<span id="totalone">875.00</span>
$(document).ready(function() {
$("#discountbtn").click(function(){
var test=$("#items #disc .dis").val();
console.log(test);
var oldTotal = $("#totalone").text();
console.log(oldTotal);
var tot = Math.round(test * 100) / 100;
var new_tot=parseFloat(oldTotal)-tot;
console.log(new_tot);
$('#items #total').html(new_tot); //It was a jQuery selector glitch.
});
});
$('#items #totalone').html("$"+new_tot);
I have an HTML page with a table in it which I want to update it's values every 2 seconds with the values stored in the MySQL database.
setInterval(updateSensorsTable, 2000);
setInterval(updatePower, 2000);
function showValue(value) {
document.getElementById("range").innerHTML = value;
}
function TurnLedOn() {
//TODO: need to set the led state and update the sql server
document.getElementById("ledStatus").src = "/LedOn.png";
}
function TurnLedOff() {
//TODO: need to set the led state and update the sql server
document.getElementById("ledStatus").src = "/LedOff.png";
}
function AjaxCaller() {
var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function callPage(url, div) {
ajax = AjaxCaller();
ajax.open("GET", url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
div.innerHTML = ajax.responseText;
}
}
}
ajax.send(null);
}
function updateSensorsTable() {
for (i = 0; i <= 7; i++)
callPage('/getVarFromDB.php?offset=' + i, document.getElementById(i));
}
function updatePower() {
document.getElementById("powerValue").innerHTML = '200';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
<title>SmartLight</title>
</head>
<body bgcolor="#E6E6FA" onload='updateSensorsTable()'>
<br></br>
<table class="sensorsTable" align="center">
<thead>
<tr>
<th>Sensor</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">GPS</td>
<td align="center" id="0">0</td>
</tr>
<tr>
<td align="left">Temperature</td>
<td align="center" id="1">0</td>
</tr>
<tr>
<td align="left">Pressure</td>
<td align="center" id="2">0</td>
</tr>
<tr>
<td align="left">Light</td>
<td align="center" id="3">0</td>
</tr>
<tr>
<td align="left">Altitude</td>
<td align="center" id="4">0</td>
</tr>
<tr>
<td align="left">Accelerometer</td>
<td align="center" id="5">0</td>
</tr>
<tr>
<td align="left">Humidity</td>
<td align="center" id="6">0</td>
</tr>
<tr>
<td align="left">Camera</td>
<td align="center" id="7">0</td>
</tr>
</tbody>
</table>
<br></br>
<table class="ledTable" align="center">
<tr>
<td align="center">
<input type="image" src="/TurnOn.png" id="turnOn" width="60" height="60" onclick='TurnLedOn()'>
</td>
<td align="center">
<input type="image" src="/TurnOff.png" id="turnOff" width="60" height="60" onclick='TurnLedOff()'>
</td>
<td align="center">
<img src="/LedOn.png" style="width:60px;height:60px" id="ledStatus">
</td>
</tr>
<tr>
<td align="center" id="ledOnButton">LED On</td>
<td align="center" id="ledOffButton">LED Off</td>
<td align="center">LED Status</td>
</tr>
</table>
<div align="center">
Brightness:
<input type="range" name="brightness" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
<span id="range">0</span>
<table align="center" class="power">
<tr>
<td align="center" id="powerValue">0</td>
<td align="left">mW</td>
</tr>
</table>
<div align="center">LED Power Meter</div>
</div>
</body>
</html>
Here is the php code:
<?php
include("connect_to_mysql.php");
$result = mysql_query("SELECT value FROM sens" );
echo mysql_result($result,$offset);
Please help me to do this with the correct way.
This code doesn't work when I use the for loop. Using this code with a direct assigment e.g callPage('/getVarFromDB.php?offset=' + 1, document.getElementById(1)); is working
"I have an HTML page with a table
in it which I want to update it's values every 2 seconds with the
values stored in the MySQL database"
Am I missing something? Where does JavaScript enter into this (other than Das Blinkenlights)?
Is there any compelling reason not to just use an HTML page and auto-refresh it every 2 seconds with <meta http-equiv="refresh" content="2000">?
That's the KISS solution.
Change the global to a local: var ajax = AjaxCaller() and this should work.
I am having a problem changing the value of a cell in a HTML table. I am just messing around with JavaScript because I have never used it. Here is my code:
<!DOCTYPE html>
<html>
<head>
<script>
var name = "Requiem";
var health = 100;
var strength = 1;
var agility = 1;
var intelligence = 1;
var gold = 50;
var Class = "Warrior";
document.getElementsByName('Name').innerHTML = name;
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Name</td>
<td>Health</td>
<td>Strength</td>
<td>Agility</td>
<td>Intelligence</td>
<td>Gold</td>
<td>Class</td>
</tr>
<tr>
<td name="Name"></td>
<td name="Health"></td>
<td name="Strength"></td>
<td name="Agility"></td>
<td name="Intelligence"></td>
<td name="Gold"></td>
<td name="Class"></td>
</tr>
</table>
</body>
</html>
Your problem is two fold.
Your script tag is in the head and runs immediately. Only tags that have been processed before the script will be available to manipulate. You can fix this by moving your script tag below the <td name="Name"></td> tag or delaying the code with something like jQuery's document ready (requires jQuery).
document.getElementsByName returns a NodeList containing all the elements with the specified name. To manipulate the first element with this name, you can use document.getElementsByName("Name")[0].
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Name</td>
<td>Health</td>
<td>Strength</td>
<td>Agility</td>
<td>Intelligence</td>
<td>Gold</td>
<td>Class</td>
</tr>
<tr>
<td name="Name"></td>
<td name="Health"></td>
<td name="Strength"></td>
<td name="Agility"></td>
<td name="Intelligence"></td>
<td name="Gold"></td>
<td name="Class"></td>
</tr>
</table>
<script>
var name = "Requiem";
var health = 100;
var strength = 1;
var agility = 1;
var intelligence = 1;
var gold = 50;
var Class = "Warrior";
document.getElementsByName('Name')[0].innerHTML = name;
</script>
</body>
</html>
document.getElementsByName() returns a NodeList (notice that it's Elements rather than Element, so you have to specify which element you'd like to modify.
In this case, there's only one element, so you only need to access the first in the list:
document.getElementsByName("Name")[0].innerHTML = name;
var name = "Requiem";
var health = 100;
var strength = 1;
var agility = 1;
var intelligence = 1;
var gold = 50;
var Class = "Warrior";
document.getElementsByName('Name')[0].innerHTML = name;
<!DOCTYPE html>
<html>
<body>
<table id="myTable" border="1">
<tr>
<td>Name</td>
<td>Health</td>
<td>Strength</td>
<td>Agility</td>
<td>Intelligence</td>
<td>Gold</td>
<td>Class</td>
</tr>
<tr>
<td name="Name"></td>
<td name="Health"></td>
<td name="Strength"></td>
<td name="Agility"></td>
<td name="Intelligence"></td>
<td name="Gold"></td>
<td name="Class"></td>
</tr>
</table>
</body>
</html>