I’m new to html and js. When ever I run the code and try to add new row, it does not work. I am using VS Code and the html page runs perfectly but the ADD new row function not working. Can anybody help me?
here is the code segment of that particular HTML page, I’m using JS here but as I am new to JS,
I can not figure out what went wrong?
<!DOCTYPE html>
<html>
<head>
<title>Add/View Projects</title>
<meta charset="windows-1252" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<style>
.container {
overflow: hidden;
}
.tab {
float: left;
}
.tab-2 {
margin-left: 50px;
}
.tab-2 input {
display: block;
margin-bottom: 10px;
}
tr {
transition: all 0.25s ease-in-out;
}
tr:hover {
background-color: #eee;
cursor: pointer;
}
</style>
</head>
<body style="
background-color: whitesmoke;
margin-top: 10px;
margin-left: 50px;
margin-right: 50px; ;
">
<div class="container col-10">
<div class="container tab tab-1">
<table class="table" border="1">
<tr>
<th scope="col">ID</th>
<th scope="col">Ward</th>
<th scope="col">Project Name</th>
<th scope="col">Project Steps</th>
<th scope="col">Source</th>
<th scope="col">Tender</th>
<th scope="col">Fiscal Year</th>
<!-- <th scope="col">Contractor</th>
<th scope="col">Contractor Address</th> -->
</tr>
<tr>
<td>111</td>
<td>24</td>
<!-- <td> <a href="drain101.html">Drain Construction</a> </td> -->
<td>10%</td>
<td>Development</td>
<td>Yes</td>
<td>2020-21</td>
<!-- <td>Mr. A</td>
<td>A Enterpris e</td> -->
</tr>
<tr>
<td>141</td>
<td>20</td>
<td>Road Development</td>
<td>60%</td>
<td>Own Fund</td>
<td>Yes</td>
<td>2021-22</td>
<!-- <td>-</td>
<td>-</td> -->
</tr>
<tr>
<td>444</td>
<td>20</td>
<td>Reconstruction of Building</td>
<td>0%</td>
<td>Revenue</td>
<td>No</td>
<td>2022-23</td>
<!-- <td>-</td>
<td>-</td> -->
</tr>
<tr>
<td>189</td>
<td>05</td>
<td>Culvert Construction</td>
<td>0%</td>
<td>Own Fund</td>
<td>No</td>
<td>2022-23</td>
<!-- <td>-</td>
<td>-</td> -->
</tr>
<tr>
<td>189</td>
<td>05</td>
<td>Construction of Building</td>
<td>30%</td>
<td>Revenue</td>
<td>Yes</td>
<td>2022-23</td>
<!-- <td>Mr. B</td>
<td>B Traders</td> -->
</tr>
<tr>
<td>199</td>
<td>05</td>
<td>Construction of Site Office</td>
<td>0%</td>
<td>Own Fund</td>
<td>No</td>
<td>2022-23</td>
<!-- <td>-</td>
<td>-</td> -->
</tr>
</table>
</div>
<div class="tab tab-2 col-6">
ID :<input type="number" name="id" id="id" /> Ward :<input type="number" name="ward" id="ward" />
Project Name :<input type="text" name="pname" id="pname" /> Step :<input type="number" name="step"
id="step" />
Source :<input type="text" name="source" id="source" /> Tender :<input type="text" name="tender"
id="tender" />
Fiscal Year :<input type="number" name="f_year" id="f_year" />
<button onclick="addHtmlTableRow();">Add</button>
</div>
</div>
<script>
var rIndex,
table = document.getElementById("table");
// check the empty input
function checkEmptyInput() {
var isEmpty = false,
id = document.getElementById("id").value,
ward = document.getElementById("ward").value,
pname = document.getElementById("pname").value;
step = document.getElementById("step").value;
source = document.getElementById("source").value;
tender = document.getElementById("tender").value;
f_year = document.getElementById("f_year").value;
if (id === "") {
alert("ID Connot Be Empty");
isEmpty = true;
} else if (ward === "") {
alert("Ward Connot Be Empty");
isEmpty = true;
} else if (pname === "") {
alert("Project Name Connot Be Empty");
isEmpty = true;
}
return isEmpty;
}
// add Row
function addHtmlTableRow() {
// get the table by id
// create a new row and cells
// get value from input text
// set the values into row cell's
if (!checkEmptyInput()) {
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3),
cell5 = newRow.insertCell(4),
cell6 = newRow.insertCell(5),
cell7 = newRow.insertCell(6),
id = document.getElementById("id").value,
ward = document.getElementById("ward").value,
pname = document.getElementById("pname").value;
step = document.getElementById("step").value;
source = document.getElementById("source").value;
tender = document.getElementById("tender").value;
f_year = document.getElementById("f_year").value;
cell1.innerHTML = id;
cell2.innerHTML = ward;
cell3.innerHTML = pname;
cell4.innerHTML = step;
cell5.innerHTML = source;
cell6.innerHTML = tender;
cell7.innerHTML = f_year;
// call the function to set the event to the new row
selectedRowToInput();
}
}
// display selected row data into input text
function selectedRowToInput() {
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].onclick = function () {
// get the seected row index
rIndex = this.rowIndex;
document.getElementById("id").value = this.cells[0].innerHTML;
document.getElementById("ward").value = this.cells[1].innerHTML;
document.getElementById("pname").value = this.cells[2].innerHTML;
document.getElementById("step").value = this.cells[3].innerHTML;
document.getElementById("source").value = this.cells[4].innerHTML;
document.getElementById("tender").value = this.cells[5].innerHTML;
document.getElementById("f_year").value = this.cells[6].innerHTML;
};
}
}
selectedRowToInput();
// function editHtmlTbleSelectedRow()
// {
// var id = document.getElementById("id").value,
// ward = document.getElementById("ward").value,
// pname = document.getElementById("pname").value;
// step = document.getElementById("step").value;
// source = document.getElementById("source").value;
// tender = document.getElementById("tender").value;
// f_year = document.getElementById("f_year").value;
// if(!checkEmptyInput()){
// table.rows[rIndex].cells[0].innerHTML = id;
// table.rows[rIndex].cells[1].innerHTML = ward;
// table.rows[rIndex].cells[2].innerHTML = pname;
// table.rows[rIndex].cells[3].innerHTML = step;
// table.rows[rIndex].cells[4].innerHTML = source;
// table.rows[rIndex].cells[5].innerHTML = tender;
// table.rows[rIndex].cells[6].innerHTML = f_year;
// }
// }
// function removeSelectedRow()
// {
// table.deleteRow(rIndex);
// // clear input text
// document.getElementById("fname").value = "";
// document.getElementById("lname").value = "";
// document.getElementById("age").value = "";
// }
</script>
</body>
</html>
>Solution :
The problem is that you missed to set the id of the table, you set the class but not the id.
<table class="table" border="1">
and in the JS code you are using table = document.getElementById("table"); to get the table.
Just add id="table" to the table definition.
<table class="table" id="table" border="1">