Jacascript wont continue

Jacascript wont continue - javascript

I want to do when I press a button, the script will change my HTML code to make it another page, but when I press another button after it the buttons don't working and doing nothing...
At the first click each button work and do his job, the second click non of the buttons work and all the script just stop working.
HTML:
<div id="innerHTML">
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
</div>
<script src="js/members.js"></script>
JS:
let print = document.getElementById("innerHTML");
let btnOrg = document.getElementById("orgBtn");
let btnWhy = document.getElementById("whyBtn");
let btnJoin = document.getElementById("joinBtn");
btnOrg.addEventListener('click', function(){
let printOrg = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
`;
print.innerHTML = printOrg;
})
btnWhy.addEventListener('click', function(){
let printWhy = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl btnOn" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right" class="whyTxt">
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
</table>
`;
print.innerHTML = printWhy;
})
btnJoin.addEventListener('click', function(){
let printJoin = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl btnOn" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" class="btnJoin" id="joinBtn">שלח טופס</button>
</td>
</tr>
</table>
`;
print.innerHTML = printJoin;
})

Hi,
here the problem is when you set innerHtml = your new html the let btnOrg = document.getElementById("orgBtn"); are now returning nothing, they point to an element of the page that has been deleted and not to an id,
here is the solution:
<div id="innerHTML">
<table align="center" >
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl btnOn" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr id="joinTable" style="display: none;"></tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" class="btnJoin" id="joinBtn">שלח טופס</button>
</td>
</tr>
<tr id="whyTable" style="display: none;"></trid>
<td colspan="3" align="right" class="whyTxt">
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
<tr id="orgTable" style="display: table;"></tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
</div>
JS:
let btnOrg = document.getElementById("orgBtn");
let orgTable = document.getElementById("orgTable");
let btnWhy = document.getElementById("whyBtn");
let whyTable = document.getElementById("whyTable");
let btnJoin = document.getElementById("joinBtn");
let joinTable = document.getElementById("joinTable");
btnOrg.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "table"
whyTable.style.display = "none"
joinTable.style.display = "none"
})
btnWhy.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "none"
whyTable.style.display = "table"
joinTable.style.display = "none"
})
btnJoin.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "none"
whyTable.style.display = "none"
joinTable.style.display = "table"
})
i changed the code you now in the HTML there is a "header" like part and the buttons are never deleted thats the content who change !

Attach the event to the body then on click check the id
document.body.addEventListener('click', e => {
if (e.target.nodeName == "BUTTON" && !e.target.id) return
let theId = e.target.id;
if (theId == "orgBtn")
print.innerHTML = printOrg
else if (theId == "whyBtn")
print.innerHTML = printWhy
else if (theId == "whyBtn")
print.innerHTML = printJoin
})
let print = document.getElementById("innerHTML");
let printOrg = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
`;
let printWhy = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl btnOn" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right" class="whyTxt">
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
</table>
`;
let printJoin = `
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl btnOn" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" class="btnJoin" id="joinBtn">שלח טופס</button>
</td>
</tr>
</table>
`;
<div id="innerHTML">
<table align="center">
<tr class="headOrgs">
<td align="left">
<button class="ttl btnOn" id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button class="ttl" id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button class="ttl" id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" class="orgLogo">
</td>
<td>
<img src="pics/org/upperfew.png" class="orgLogo">
</td>
<td>
<img src="pics/org/redheart.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" class="orgLogo">
</td>
</tr>
<tr align="center" class="orgNames">
<td>
רד איסט
</td>
</tr>
</table>
</div>

Related

Get some data from a htm page and save in mysql

I am not a programmer :(
I would like a page where I insert the address from another x.htm page and click "get"
Then I want to save the data in a mysql database, so I can get the data out for each driver.
<table align="center">
<tbody>
<center><b><p>Statistik: 07-02-2022 21:55:35 - </p></b></center><br />
<tr bgColor="#999999">
<td bgcolor="#999999" width="30">
<div align="center">
<font face="Verdana">Pos </font>
</div>
</td>
<td bgcolor="#999999" width="158">
<div align="center">
<font face="Verdana">driver </font>
</div>
</td>
<td bgcolor="#999999" width="100">
<div align="center">
<font face="Verdana">Car </font>
</div>
</td>
<td bgcolor="#e5665e" width="70">
<div align="center">
<font face="Verdana"> 1-Red</font>
</div>
</td>
<td bgcolor="#ffffff" width="70">
<div align="center">
<font face="Verdana"> 2-White</font>
</div>
</td>
<td bgcolor="#78ccea" width="70">
<div align="center">
<font face="Verdana"> 3-Blue</font>
</div>
</td>
<td bgcolor="#ffff28" width="70">
<div align="center">
<font face="Verdana"> 4-Yellow</font>
</div>
</td>
<td bgcolor="#999999" width="70">
<div align="center">
<font face="Verdana"><b>Best time</b></font>
</div>
</td>
<td bgcolor="#999999" width="80">
<div align="center">
<font face="Verdana">Total laps</font>
</div>
</td>
</tr>
<tr bgColor="#999999">
<td bgcolor="#ffffff" width="30">
<div align="center">
<font face="Verdana">1</font>
</div>
</td>
<td bgcolor="#ffffff" width="158">
<div align="center">
<font face="Verdana">James Hunt</font>
</div>
</td>
<td bgcolor="#ffffff" width="100">
<div align="center">
<font face="Verdana">Alfa Romeo GTA</font>
</div>
</td>
<td bgcolor="#87fe58" width="70">
<div align="center">
<font face="Verdana"><b>7.952</b></font>
</div>
</td>
<td bgcolor="#87fe58" width="70">
<div align="center">
<font face="Verdana"><b>7.963</b></font>
</div>
</td>
<td bgcolor="#87fe58" width="70">
<div align="center">
<font face="Verdana"><b>7.975</b></font>
</div>
</td>
<td bgcolor="#87fe58" width="70">
<div align="center">
<font face="Verdana"><b>8.088</b></font>
</div>
</td>
<td bgcolor="#ffffff" width="70">
<div align="center">
<font face="Verdana"><b>7.952</b></font>
</div>
</td>
<td bgcolor="#ffffff" width="80">
<div align="center">
<font face="Verdana"><b>88.25</b></font>
</div>
</td>
</tr>
<tr bgColor="#999999">
<td bgcolor="#ffffff" width="30">
<div align="center">
<font face="Verdana">2</font>
</div>
</td>
<td bgcolor="#ffffff" width="158">
<div align="center">
<font face="Verdana">Jackie Stewart</font>
</div>
</td>
<td bgcolor="#ffffff" width="100">
<div align="center">
<font face="Verdana">Mini Cooper</font>
</div>
</td>
<td bgcolor="#b6fea6" width="70">
<div align="center">
<font face="Verdana">8.176</font>
</div>
</td>
<td bgcolor="#b6fea6" width="70">
<div align="center">
<font face="Verdana">8.194</font>
</div>
</td>
<td bgcolor="#b6fea6" width="70">
<div align="center">
<font face="Verdana">7.989</font>
</div>
</td>
<td bgcolor="#b6fea6" width="70">
<div align="center">
<font face="Verdana">8.197</font>
</div>
</td>
<td bgcolor="#ffffff" width="70">
<div align="center">
<font face="Verdana">7.989</font>
</div>
</td>
<td bgcolor="#ffffff" width="80">
<div align="center">
<font face="Verdana">86.68</font>
</div>
</td>
</tr>

Well, man, this is super easy: you can use QuerySelectorAll.
See this example based on you code:
const rows = [];
document.querySelectorAll('table tbody tr').forEach((tr, rowIndex) => {
const row = [];
tr.querySelectorAll('td').forEach((item, cellIndex) => {
console.log(`row ${rowIndex}, cell ${cellIndex}:`, item.textContent.trim());
row.push(item.textContent.trim());
});
rows.push(row);
});
console.log("rows", rows); // you can use this data to save on you database
<table>
<tbody>
<center>
<b>
<p>Statistik: 07-02-2022 21:55:35 - </p>
</b>
</center>
<br />
<tr bgColor="#999999">
<td bgcolor="#999999" width="30">
<div align="center"> <font face="Verdana">Pos </font></div>
</td>
<td bgcolor="#999999" width="158">
<div align="center"> <font face="Verdana">driver </font></div>
</td>
<td bgcolor="#999999" width="100">
<div align="center"> <font face="Verdana">Car </font></div>
</td>
<td bgcolor="#e5665e" width="70">
<div align="center"> <font face="Verdana"> 1-Red</font></div>
</td>
<td bgcolor="#ffffff" width="70">
<div align="center"> <font face="Verdana"> 2-White</font></div>
</td>
<td bgcolor="#78ccea" width="70">
<div align="center"> <font face="Verdana"> 3-Blue</font></div>
</td>
<td bgcolor="#ffff28" width="70">
<div align="center"> <font face="Verdana"> 4-Yellow</font></div>
</td>
<td bgcolor="#999999" width="70">
<div align="center"> <font face="Verdana"><b>Best time</b></font></div>
</td>
<td bgcolor="#999999" width="80">
<div align="center"> <font face="Verdana">Total laps</font></div>
</td>
</tr>
<tr bgColor="#999999">
<td bgcolor="#ffffff" width="30">
<div align="center"> <font face="Verdana">1</font></div>
</td>
<td bgcolor="#ffffff" width="158">
<div align="center"> <font face="Verdana">James Hunt</font></div>
</td>
<td bgcolor="#ffffff" width="100">
<div align="center"> <font face="Verdana">Alfa Romeo GTA</font></div>
</td>
<td bgcolor="#87fe58" width="70">
<div align="center"> <font face="Verdana"><b>7.952</b></font></div>
</td>
<td bgcolor="#87fe58" width="70">
<div align="center"> <font face="Verdana"><b>7.963</b></font></div>
</td>
<td bgcolor="#87fe58" width="70">
<div align="center"> <font face="Verdana"><b>7.975</b></font></div>
</td>
<td bgcolor="#87fe58" width="70">
<div align="center"> <font face="Verdana"><b>8.088</b></font></div>
</td>
<td bgcolor="#ffffff" width="70">
<div align="center"> <font face="Verdana"><b>7.952</b></font></div>
</td>
<td bgcolor="#ffffff" width="80">
<div align="center"> <font face="Verdana"><b>88.25</b></font></div>
</td>
</tr>
<tr bgColor="#999999">
<td bgcolor="#ffffff" width="30">
<div align="center"> <font face="Verdana">2</font></div>
</td>
<td bgcolor="#ffffff" width="158">
<div align="center"> <font face="Verdana">Jackie Stewart</font></div>
</td>
<td bgcolor="#ffffff" width="100">
<div align="center"> <font face="Verdana">Mini Cooper</font></div>
</td>
<td bgcolor="#b6fea6" width="70">
<div align="center"> <font face="Verdana">8.176</font></div>
</td>
<td bgcolor="#b6fea6" width="70">
<div align="center"> <font face="Verdana">8.194</font></div>
</td>
<td bgcolor="#b6fea6" width="70">
<div align="center"> <font face="Verdana">7.989</font></div>
</td>
<td bgcolor="#b6fea6" width="70">
<div align="center"> <font face="Verdana">8.197</font></div>
</td>
<td bgcolor="#ffffff" width="70">
<div align="center"> <font face="Verdana">7.989</font></div>
</td>
<td bgcolor="#ffffff" width="80">
<div align="center"> <font face="Verdana">86.68</font></div>
</td>
</tr>
</tbody>
</table>
PS: if you using NodeJS(serverside) maybe you can get the HTML code
first to then use a dom reader like jsdom to parse HTML and use
the similar previous solution.
PS 2: you can use axios to handle http/s requests
const html = (await axios.get("https://example.com/page.html")).data;
const dom = new JSDOM(html);
const trs = dom.querySelectorAll('table tbody tr');

JavaScript sum table value

I have the HTML table below. How can I sum up all of the columns based on continent group?
<html>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center>Asia</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">IND</font>
</td>
<td>
<font style="float:right;">900,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;">25,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">CHN</font>
</td>
<td>
<font style="float:right;">9,000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">RUS</font>
</td>
<td>
<font style="float:right;">3,000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;">5,000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;">OTH</font>
</td>
<td>
<font style="float:right;">90,000</font>
</td>
</tr>
</table>
</html>
Example: in order to get the Total, I need to add all of the continents, in this case Asia + Europe + Others, but first I need to have the subtotal of those continents. Additional info: Those continents and nations can be editable(add/remove) based on database. How can I do that?
In simple terms, like using Microsoft Excel, where we can sum up each/any column that we want.
I know JavaScript sum() that I got from other sites, but so far it only gives me the total for all column values. Below is the code, where index equals to number of column.
function sumColumn(index) {
var total = 0;
$("td:nth-child(" + index + ")").each(function() {
total += parseFloat($(this).text(), 10) || 0;
});
return total.toFixed(2);
}

If you're trying to learn on how to use Jquery Selectors, I've modified the snippet according to what you have mentioned. However, what you are trying to do here is a bad way of handling data. You should never represent data in this form. Use PHP or ajax to load data to the elements.
$(function() {
let asia_sum = 0;
$('.asia').each( function() {asia_sum+= parseInt($(this).text()); });
let eur_sum = 0;
$('.eur').each( function() {eur_sum+= parseInt($(this).text()); });
let other_sum = 0;
$('.other').each( function() {other_sum+= parseInt($(this).text()); });
let total = asia_sum + eur_sum + other_sum;
$('#total').text(total);
$('#eur').text(eur_sum);
$('#asia').text(asia_sum);
$('#other').text(other_sum);
console.log(other_sum);
});
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<table border="1">
<tr>
<th>Continent</th>
<th>Population</th>
</tr>
<tr>
<td>
<center>Total</center>
</td>
<td>
<center id='total'>sum(continent)???</center>
</td>
</tr>
<tr>
<td>
<center >Asia</center>
</td>
<td>
<center id='asia'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >IND</font>
</td>
<td>
<font style="float:right;" class='asia'>900000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">JPY</font>
</td>
<td>
<font style="float:right;" class='asia'>25000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >CHN</font>
</td>
<td>
<font style="float:right;" class='asia'>9000</font>
</td>
</tr>
<tr>
<td>
<center>Europe</center>
</td>
<td>
<center id='eur'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >RUS</font>
</td>
<td>
<font style="float:right;" class='eur'>3000</font>
</td>
</tr>
<tr>
<td>
<font style="float:right;">ITA</font>
</td>
<td>
<font style="float:right;" class='eur'>5000</font>
</td>
</tr>
<tr>
<td>
<center>Others</center>
</td>
<td>
<center id='other'>sum(nation)??</center>
</td>
</tr>
<tr>
<td>
<font style="float:right;" >OTH</font>
</td>
<td>
<font style="float:right;" class='other'>90000</font>
</td>
</tr>
</table>
</body>
</html>

responsive table with rowspan and colspan

I am trying to make this table responsive for mobile but could done properly. I tried bootstrap table-responsive class but its not working. because of rowspan i am facing problem so can any suggest me css for this Table
Desktop Format:
https://postimg.org/image/gxj2riueh/
Mobile Format:
https://postimg.org/image/mtq57pwcn/
Code:
<table>
<tbody>
<tr>
<td style="background: #fcfbcd;" rowspan="5"
<p style="text-align: center;">BREAKFAST</p>
</td>
<td>
<p><strong>MONDAY</strong></p>
</td>
<td>
<p><strong>TUESDAY</strong></p>
</td>
<td>
<p><strong>WEDNESDAY</strong></p>
</td>
<td>
<p><strong>THURSDAY</strong></p>
</td>
<td>
<p><strong>FRIDAY</strong></p>
</td>
</tr>
<tr>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Kix Cereal</p>
</td>
<td>
<p>Whole Grain Raisin</p>
<p>Bread (1 slice plain, Butter or Marg)</p>
</td>
<td>
<p>Cinnamon Raisin Bagel Cream Cheese</p>
</td>
<td>
<p>Bran Flakes Cereal</p>
</td>
<td>
<p>Cheerios Cereal</p>
</td>
</tr>
<tr>
<td style="background: #dbc0af;" rowspan="5"
<p style="text-align: center;">LUNCH</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
</tr>
<tr>
<td>
<p>Chicken Fingers</p>
</td>
<td>
<p>Corndog</p>
</td>
<td>
<p>Cold cut turkey sandwich</p>
</td>
<td>
<p>Hamburger/ Cheeseburger</p>
</td>
<td>
<p>Pizza</p>
</td>
</tr>
<tr>
<td>
<p>Green Beans</p>
</td>
<td>
<p>Pickle</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Mashed Potatoes</p>
</td>
<td>
<p> Chips</p>
</td>
<td>
<p>Brownie</p>
</td>
<td>
<p>Fries</p>
</td>
<td>
<p>Breadsticks</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td style="background: #e7e5e6;" rowspan="5"
<p style="text-align: center;">SNACK</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Soynut Butter</p>
</td>
<td>
<p>Cottage Cheese</p>
</td>
<td>
<p>Yogurt <strong><em>4 oz cup</em></strong></p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p>Celery Sticks</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>pretzel</p>
</td>
<td>
<p>Oreo cookies</p>
</td>
<td>
<p>Raisins</p>
</td>
<td>
<p>Pears</p>
</td>
<td>
<p>Fruit Cocktail</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
</tbody>
</table>

Changed the <td> "headers" into real table headers <th>
Fixed malformed <th> Each of them were missing an angle bracket >
Loaded Bootstrap CSS
Wrapped the whole <table> into a <section> and added .table-responsive
Added .table and ,table-compact to <table>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<section class='table-responsive' style='margin:15px auto;'>
<table class='table table-condensed'>
<tbody>
<tr>
<th style="background: #fcfbcd;" rowspan="5">
<p style="text-align: center;">BREAKFAST</p>
</th>
<td>
<p><strong>MONDAY</strong></p>
</td>
<td>
<p><strong>TUESDAY</strong></p>
</td>
<td>
<p><strong>WEDNESDAY</strong></p>
</td>
<td>
<p><strong>THURSDAY</strong></p>
</td>
<td>
<p><strong>FRIDAY</strong></p>
</td>
</tr>
<tr>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Kix Cereal</p>
</td>
<td>
<p>Whole Grain Raisin</p>
<p>Bread (1 slice plain, Butter or Marg)</p>
</td>
<td>
<p>Cinnamon Raisin Bagel Cream Cheese</p>
</td>
<td>
<p>Bran Flakes Cereal</p>
</td>
<td>
<p>Cheerios Cereal</p>
</td>
</tr>
<tr>
<th style="background: #dbc0af;" rowspan="5">
<p style="text-align: center;">LUNCH</p>
</th>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
</tr>
<tr>
<td>
<p>Chicken Fingers</p>
</td>
<td>
<p>Corndog</p>
</td>
<td>
<p>Cold cut turkey sandwich</p>
</td>
<td>
<p>Hamburger/ Cheeseburger</p>
</td>
<td>
<p>Pizza</p>
</td>
</tr>
<tr>
<td>
<p>Green Beans</p>
</td>
<td>
<p>Pickle</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Mashed Potatoes</p>
</td>
<td>
<p> Chips</p>
</td>
<td>
<p>Brownie</p>
</td>
<td>
<p>Fries</p>
</td>
<td>
<p>Breadsticks</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<th style="background: #e7e5e6;" rowspan="5">
<p style="text-align: center;">SNACK</p>
</th>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Soynut Butter</p>
</td>
<td>
<p>Cottage Cheese</p>
</td>
<td>
<p>Yogurt <strong><em>4 oz cup</em></strong></p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p>Celery Sticks</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>pretzel</p>
</td>
<td>
<p>Oreo cookies</p>
</td>
<td>
<p>Raisins</p>
</td>
<td>
<p>Pears</p>
</td>
<td>
<p>Fruit Cocktail</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
</tbody>
</table>
</section>

How to colspan tr table from the start of the table

i want to start the colspan from the second column i mean from the name:
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td><p>Name</p></td>
<td><p>ID</p></td>
<td><p>GPS date</p></td>
<td><p>Adresse</p></td>
<td><p>Company</p></td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td><p>{{device.name}}</p></td>
<td><p>{{device.uniqueid}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
</tbody>
please can anyone tell me how i can colspan from the name??

It seems all you need is to add a <td> to the row. You have :
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
Change it to:
<tr ng-if="device.expanded" ng-repeat-end="">
<td style="width: 30px;"></td>
<td colspan="5">gfhgfjhfjtjrtkjy</td>
</tr>
This should add a <td> beneath the plus/minus icon. Additionally, you can style this <td> if you do not intent it to be appear as a column ( which I think is your intent).
Hope that helps.

<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td><p>Name</p></td>
<td><p>ID</p></td>
<td><p>GPS date</p></td>
<td><p>Adresse</p></td>
<td><p>Company</p></td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td><p>{{device.name}}</p></td>
<td><p>{{device.uniqueid}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td colspan="2" align="center"><p>{{device.name}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>

How can I select the second cancel button instead of the first?

I want to cancel the second line item instead of the first.
Below is some sample code for the 2 line items:
<div class="screenlet-body">
<form name="updateItemInfo" method="post" action="/ordermgr/control/updateOrderItems">
<input type="hidden" name="orderId" value="140070"/>
<input type="hidden" name="orderItemSeqId" value=""/>
<input type="hidden" name="shipGroupSeqId" value=""/>
<input type="hidden" name="supplierPartyId" value="10964"/>
<input type="hidden" name="orderTypeId" value="PURCHASE_ORDER"/>
<table class="basic-table order-items" cellspacing="0">
<tr class="header-row">
<td width="25%">Product</td>
<td width="10">Part Condition</td>
<td width="25%">Status</td>
<td width="5%" class="align-text">Quantity</td>
<td width="10%" class="align-text">Unit Price</td>
<td width="10%"> </td>
<td width="10%" class="align-text">Sub Total</td>
<td width="2%"> </td>
<td width="3%"> </td>
</tr>
<tr><td colspan="8"><hr/></td></tr>
<tr>
<td valign="top">
<div>
10588 -
NAS516-1A
- ZERk FITTING
</td>
<td>
<select name="icon_00001">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW">New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
2011-03-11 09:16:57.0 Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 5 <br/>
Cancelled: 0 <br/>
Remaining: 5 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00001" value="10"/>
<input type="checkbox" name="opm_00001" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$50.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00001:00001" size="6" value="5"/>
<input type="checkbox" name="selectedItem" value="00001">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00001" name="cancel_00001 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00001';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00001" value="" size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00001" value="2011-03-31 12:49:16.000" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<div>
10602 -
MS21075L3N
- NUTPLATE
</td>
<td>
<select name="icon_00002">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW" selected>New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 1 <br/>
Cancelled: 0 <br/>
Remaining: 1 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00002" value="100"/>
<input type="checkbox" name="opm_00002" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$100.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00002:00001" size="6" value="1"/>
<input type="checkbox" name="selectedItem" value="00002">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00002" name="cancel_00002 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00002" value="This is a comment." size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00002" value="" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<td colspan="7"> </td>
<td><input type="submit" value="Update Items" class="buttontext"/> </td>
What I need to do is cancel the second line item on the order.
There is 4 large windows showing code.
The second large one is the first line item and the fourth large one is the second line item.
I need to cancel the second.
Thanks in advance.

I actually figured out a way to do it using this line of code:
browser.link(:url, "javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()").click
The way it works is I specify the first value to reflect the line item number which will cancel out the specified line item.
Thanks for your help guys.

We Keep Coding

JavaScript is the programming language of the Web.

Jacascript wont continue - javascript

Related

Get some data from a htm page and save in mysql

JavaScript sum table value

responsive table with rowspan and colspan

How to colspan tr table from the start of the table

How can I select the second cancel button instead of the first?

Categories

Resources