I am currently using domotz to shows when a device is connected. I currently in cell 4 show a green check mark for connectivity, how would I for cell 4 put an x mark for when it is disconnected because right now it does not separate weather it is connected or disconnected and shows. green mark for every device even devices that are not connected. Thanks
`
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<table id="devicelist" style="width:100%">
<tr>
<th>Display Name</th>
<th>ID</th>
<th>Name</th>
<th>Model</th>
</tr>
</table>
</div>
</div>
</div>
<script src="js/jquery-2.1.0.min.js"></script>
<script>
var headers = {
success: function(data) {
var str = JSON.stringify(data);
var obj = JSON.parse(str);
var NumDevices = obj.length;
var table = document.getElementById('devicelist');
var row = table.insertRow(i+1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = i+1
cell2.innerHTML = obj[i].display_name;
cell3.innerHTML = obj[i].id;
cell4.innerHTML = "<img src='img/greenn.jpg'/>";
</script>
</body>
</html>
Related
newbie here.. I was looking for some kind of function that can total the amount of one input type in table which is the Amount input.
I've tried parseInt function to the amount and its cell but it doesn't work.
I think its getting only the .innerHTML but not what it contains which should be the number.
var entryButton = document.getElementById('inputButton')
const tbodyEl = document.querySelector("tbody");
var row = 1;
//click button event
entryButton.addEventListener('click', tableDisplay);
//input value and displaying information
function tableDisplay(e) {
e.preventDefault()
var name = document.getElementById('inputName').value;
var amount = document.getElementById('inputAmount').value;
var date = document.getElementById('inputDate').value;
var remarks = document.getElementById('inputRemarks').value;
document.getElementById('inputName').value = '';
document.getElementById('inputAmount').value = '';
document.getElementById('inputDate').value = '';
document.getElementById('inputRemarks').value = '';
if (!name || !amount || !date || !remarks) {
alert("Please fill all the blanks")
return;
}
name.value = " ";
amount.value = " ";
date.value = " ";
remarks.value = " ";
var table = document.getElementById('displayTable');
var newRow = table.insertRow(row);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
cell1.innerHTML = name
cell2.innerHTML = date
cell3.innerHTML = amount
cell4.innerHTML = remarks
selectedRow()
row++;
}
//adding total amount function??
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<link
href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"
rel="stylesheet"
/>
<link
href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Expense Tracker</title>
</head>
<body>
<h1 class="d-flex justify-content-center mb-5 mt-5">Expense Tracker</h1>
<form class="form d-flex justify-content-center mb-5">
<span class="fw-bolder m-1"
>Name: <input class="m-1" id="inputName" type="text"
/></span>
<span class="fw-bolder m-1"
>Date: <input class="m-1" id="inputDate" type="date"
/></span>
<span class="fw-bolder m-1"
>Amount: <input type="number" class="totalAmount m-1" id="inputAmount"
/></span>
<span class="fw-bolder m-1"
>Remarks <input class="m-1" id="inputRemarks" type="text"
/></span>
<button class="m-1" id="inputButton">
<i class="icon-level-down fs-4"></i>
</button>
<!-- How to delete specific row -->
<button class="m-1" type="button" id="deleteSelection">
<i class="icon-remove-sign fs-4"></i>
</button>
</form>
<table class="table m-5" id="displayTable">
<thead>
<tr id="numero">
<th scope="col">
<i class="icon-file-text fw-bolder fs-3"></i> Description
</th>
<th scope="col"><i class="icon-calendar fw-bolder fs-3"></i> Date</th>
<th scope="col"><i class="icon-usd fw-bolder fs-3"></i> Amount</th>
<th scope="col"><i class="icon-pencil fs-3"></i> Remarks</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- //passing total amount?? -->
<span class="d-flex justify-content-center"
>Total: <input type="number" id="total" value="0" disabled
/></span>
<script src="script.js"></script>
</body>
</html>
I created a function called total(), which calculates the total of the column 'Amount' and prints it inside the input #total.
var entryButton = document.getElementById('inputButton')
const tbodyEl = document.querySelector("tbody");
var row = 1;
//click button event
entryButton.addEventListener('click', tableDisplay);
//input value and displaying information
function tableDisplay(e) {
e.preventDefault()
var name = document.getElementById('inputName').value;
var amount = document.getElementById('inputAmount').value;
var date = document.getElementById('inputDate').value;
var remarks = document.getElementById('inputRemarks').value;
document.getElementById('inputName').value = '';
document.getElementById('inputAmount').value = '';
document.getElementById('inputDate').value = '';
document.getElementById('inputRemarks').value = '';
if (!name || !amount || !date || !remarks) {
alert("Please fill all the blanks")
return;
}
name.value = " ";
amount.value = " ";
date.value = " ";
remarks.value = " ";
var table = document.getElementById('displayTable');
var newRow = table.insertRow(row);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
cell1.innerHTML = name
cell2.innerHTML = date
cell3.innerHTML = amount
cell4.innerHTML = remarks
total()
row++;
}
function total(){
var table = document.getElementById('displayTable');
let total = 0
for(let i = 1; i<table.rows.length; i++){
total+=Number(table.rows[i].cells[2].innerText)
}
const totalInput = document.getElementById('total')
totalInput.value=total
}
I'm using this as a reference for my website. I want to save the table's generated data to mysql. anyone have an idea on how to save this? I will not show my code anymore because its all mess up, because i'm trying to save my own table's data. I just need to know how to save this table's data and ill find a work around. Thanks
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
cell3.innerHTML = rowCount;
var cell4 = row.insertCell(3);
cell4.innerHTML = rowCount;
var cell5 = row.insertCell(4);
cell5.innerHTML = rowCount;
var cell6 = row.insertCell(5);
cell6.innerHTML = rowCount;
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" border="1">
<tr>
<th><INPUT type="checkbox" name="chk[]"/></th>
<th>Make</th>
<th>Model</th>
<th>Description</th>
<th>Start Year</th>
<th>End Year</th>
</tr>
</TABLE>
</BODY>
</HTML>
Following on from your earlier question and this new updated question I put together a demo which I hope will prove useful. Certain assumptions were made ( that you will need to input data into some fields and not just record table row number )
If you save this as a PHP script and run in the browser you can inspect the console to see the results of the Fetch request. It is that Fetch request that you can use to save the data to db.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
$sql='insert into `table` (`make`,`model`,`description`,`start-year`,`end-year`) values (?,?,?,?,?)';
$payload=$_POST;
$payload['sql']=$sql;
exit( json_encode( $payload ) );
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Add/delete table rows - save to db</title>
<script>
document.addEventListener('DOMContentLoaded',(e)=>{
const tbl=document.getElementById('dataTable');
const fields=['make','model','description','start-year','end-year'];
Array.from( document.querySelectorAll('input[type="button"]') ).forEach( bttn=>{
bttn.addEventListener('click',function(e){
switch( this.name ){
case 'add':
let tr=tbl.querySelector('tbody').insertRow();
let input=document.createElement('input');
input.type='checkbox';
input.name='chk[]';
input.value=1;
tr.insertCell().appendChild( input );
fields.forEach( ( field, index )=>{
input=document.createElement('input');
input.type='text';
input.name=field;
input.value=index+','+tbl.rows.length;
tr.insertCell().appendChild( input );
});
break;
case 'del':
Array.from( tbl.querySelectorAll('input[type="checkbox"]:checked') ).forEach( chk=>{
tbl.querySelector('tbody').removeChild( chk.parentNode.parentNode )
});
break;
case 'save':
Array.from( tbl.querySelectorAll('input[type="checkbox"]:checked') ).forEach( chk=>{
/* find all form elements for the row and send XHR request to server to save data */
let data=new FormData();
Array.from( chk.parentNode.parentNode.querySelectorAll('input') ).forEach( input=>{
if( fields.includes( input.name ) )data.append( input.name, input.value );
})
/* using FETCH, send form data to server */
fetch( location.href,{ method:'post', mode:'no-cors', credentials:'include', body:data } ).then( json=>{
console.info( json )
}).catch( err=>{
alert( err )
});
});
break;
}
});
});
});
</script>
<style>
table{width:80%;border:1px solid black;border-collapse: separate;background:rgba(0,50,150,0.25);color:white;}
td{border:1px dotted rgba(0,0,0,0.5);margin:2px;padding:0.5rem;background:white;color:black}
</style>
</head>
<body>
<form method='post'>
<input type='button' name='add' value='Add row' />
<input type='button' name='del' value='Delete row' />
<input type='button' name='save' value='Save to db' />
</form>
<table id='dataTable'>
<thead>
<tr>
<th> </th>
<th>Make</th>
<th>Model</th>
<th>Description</th>
<th>Start Year</th>
<th>End Year</th>
</tr>
</thead>
<tbody><!-- dynamically generated content --></tbody>
</table>
</body>
</html>
Trying to add a new table row and info for every function trigger. The problem is that i need to extract the previous information inputted into the new rows. How would i go about getting this information, to then calculate other stuff with it?
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>Rabattvarsleren</title>
<script src="script.js"></script>
</head>
<body>
<input type="text" id="input">
<button onclick="leggtil()" id="leggtil">Legg til</button><br><br><br><br>
<br><br>
<table id="yeet">
<tr>
<th id="total">Total: </th>
</tr>
</table>
</body>
</html>
JS:
function leggtil() {
var input = parseInt(document.getElementById("input").value);
var table = document.getElementById("yeet");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = input;
}
I've been trying to figure out this bug for a little while now and I cannot find anything about it online.
What I expect to happen:
When the create row button is pressed is that a new row is created at the bottom of the table. The row has three cells. The first is the index, the second is " New 1 " and the third is " New 2 ".
What is happening:
That I do not want to happen is that the first cell in new rows appears empty. Inspecting it shows that it actually has no content. Saving the string to a variable then adding it to the inner html of a cell does not work either. However if I log that variable to the console it does print the correct index.
function myCreateFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var test = table.rows.length.toString()
cell2.innerHTML = test.toString()
console.log(test)
cell2.innerHTML = " NEW 1 ";
cell3.innerHTML = " NEW 2 ";
}
function myDeleteFunction() {
document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length - 1);
}
table,
td {
border: 1px solid black;
}
<p>Click the buttons to create and delete row(s) for the table.</p>
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>
<p/>
<form>
<table id="myTable">
<tr>
<td> 1 </td>
<td> NEW 1 </td>
<td> NEW 2 </td>
</tr>
</table>
<br>
</form>
I'm sure I'm doing something wrong that I'm just not seeing. If anyone could help shed light on my issue that would be wonderful. Thank you in advance.
cell1.innerHTML = test;
cell2.innerHTML = " NEW 1 ";
cell3.innerHTML = " NEW 2 ";
As simply as that
You are not setting any value to cell1.
In fact your problem is that you are inserting the index in the cell2 instead of cell1, so cell1 is always empty.
Just change this line:
cell2.innerHTML = test.toString();
To:
cell1.innerHTML = test;
Demo:
function myCreateFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var test = table.rows.length.toString()
cell1.innerHTML = test;
console.log(test)
cell2.innerHTML = " NEW 1 ";
cell3.innerHTML = " NEW 2 ";
}
function myDeleteFunction() {
document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length-1);
}
table, td {
border: 1px solid black;
}
<p>Click the buttons to create and delete row(s) for the table.</p>
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>
<p/>
<form>
<table id="myTable">
<tr>
<td> 1 </td>
<td> NEW 1 </td>
<td> NEW 2 </td>
</tr>
</table>
<br>
</form>
You never set the innerHTML of the first inserted cell. You must have forgotten to set the innerHTML of the first cell and instead set the innerHTML of the second cell twice.
Change
cell2.innerHTML = test.toString()
To
cell1.innerHTML = test;//you do not need to invoke toString() on a String
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the buttons to create and delete row(s) for the table.</p>
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>
<p/>
<form>
<table id="myTable">
<tr>
<td> 1 </td>
<td> NEW 1 </td>
<td> NEW 2 </td>
</tr>
</table>
<br>
</form>
<script>
function myCreateFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var test = table.rows.length.toString()
cell1.innerHTML = test;
console.log(test)
cell2.innerHTML = " NEW 1 ";
cell3.innerHTML = " NEW 2 ";
}
function myDeleteFunction() {
document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length-1);
}
</script>
</body>
</html>
my javascript function is below where I am creating the 2 textboxes dynamically each time when the addRow() function is called on button click.Also,I am setting name attribute for each textbox dynamically.but I am not able to access these textbox values from servlet and getting null value as output.
<html>
<head>
<script>
var count=1;
function addRow()
{
var table = document.getElementById('table');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "item "+ count;
// document.write(element1.name);
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "amount" + count;
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = ' <input type="button" value="Edit" onclick="editRow(this)"/><input type="button" value="Delete" onclick="deleteRow(this)"/>';
cell3.setAttribute("style", "display:none;");
var cell4 = row.insertCell(3);
cell4.innerHTML = '<input type="button" value="Save" onClick="saveRow(this)">';
document.listform.hfield.value=rowCount;
count++;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Create your list</title>
</head>
<body>
<form name="listform" method="post" action="Billingservlet">
<div class="wrap">
<center>
<div id="display">
<table id='table' border="0">
<tr id='id'>
<th>
Item Name
</th>
<th>
No. of units
</th>
</tr>
</table>
<input type="button" value="Add another item" onclick="addRow()">
<input type="submit" value="Submit List">
<input type="hidden" name="hfield">
</div>
</center>
</div>
</form>
</body>
</html>