I want the function to work with the button in the table created in JavaScript.
Asked 1 years ago, Updated 1 years ago, 43 viewsI would like to implement a function (insertColumn) on the buttons in the table generated by JavaScript.
Currently, there is an error in the program, so please tell me the solution.
HTML is the <input type="button" class="AddCln" value="Add a Column" onclick="insertColumn(table)"> portion, where JS is the const insertColumn=(table)=>{/Add a column to a loss.tableIdentment(table.table)=
There is an error in the section.
Thank you for your cooperation.
HTML
<!doctype html>
<html class="no-js"lang="">
<head>
<metacharset="utf-8">
<title>
Project Management System
</title>
<link rel="stylesheet" href="pms.css" type="text/css">
</head>
<body>
<h1>Manage Your Project</h1>
<input type="button" class="AddPrj" value="Add a Project" onclick="addPrj('PMS')">
<divid="PMS"></div>
<input class="prjName" type="text"placeholder="Project Name">
<table id="tbl" class="PMStbl" border="1">
<tr>
<th>
<input type="button" class="AddCln" value="Add a Column" onclick="insertColumn(table)">
</th>
<th>
<input type="date">
</th>
</tr>
<tr>
<td>PIC</td>
<td><input type="text" placeholder="Input Your Name">/td>
</tr>
<tr>
<td>Task</td>
<td>
<select>
<option value="dev">coding</option>
<option value="rev">review</option>
<option value="fix">fixed</option>
</select>
</td>
</tr>
</table>
<script src=pms.js></script>
</body>
</html>
JavaScript
//1-Function to add a new column to a Table, which is already created by HTML
const insertColumn=(table)=>{
// Add a column to a Table
let tbl = document.getElementById (this.closeest(table));
letcell_1 = tbl.rows[0].insertCell(1);
cell_1.innerHTML='<input type="date">';
letcell_2=tbl.rows[1].insertCell(1);
cell_2.innerHTML='<input type="text"placeholder="Input your Name">';
letcell_3=tbl.rows[2].insertCell(1);
cell_3.innerHTML='<select><option value="dev">coding</option>value="rev">review</option value="fix">fixed>select;>>>opt;
};
// 2- Function to Create a new Table
constaddPrj=(PMS)=>{
// Get tag's IDs from the Table
let$prjName= document.getElementsByClassName('prjName');
let prjName = $prjName.length;
lettableID="tbl_"+String(prjName);
let newPrjID = "prj_" + String(prjName);
const newDiv = document.getElementById('PMS');
// Create a new "Project Name" button
let newPrj= document.createElement('input');
newPrj.setAttribute("type", "text");
newPrj.setAttribute("placeholder", "Project Name");
newPrj.setAttribute("class", "prjName");
newPrj.setAttribute("id", newPrjID);
// Generate a new Table
let table = document.createElement('table');
table.setAttribute("border", "1");
table.setAttribute("id", tableID);
let them = document.createElement('thead');
lettbody= document.createElement('tbody');
table.appendChild(thead);
table.appendChild(tbody);
// Insert a new button and a new table
newDiv.insertBefore(table, newDiv.firstChild);
newDiv.insertBefore(newPrj, newDiv.firstChild);
// Creating and adding data to first row of the table
letrow_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML='<input type="Button" value="Add a Column" onclick="insertColumn(this.clost(table)))">;
let heading_2 = document.createElement('th');
heading_2.innerHTML='<input type="date">';
row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
thead.appendChild(row_1);
// Create 2nd row data
letrow_2 = document.createElement('tr');
letrow_2_data_1 = document.createElement('td');
row_2_data_1.innerHTML = "PIC";
letrow_2_data_2 = document.createElement('td');
row_2_data_2.innerHTML='<input type="text"placeholder="Input Your Name">';
row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
tbody.appendChild(row_2);
// Create 3rd row data
letrow_3 = document.createElement('tr');
letrow_3_data_1 = document.createElement('td');
row_3_data_1.innerHTML = "Task";
letrow_3_data_2 = document.createElement('td');
row_3_data_2.innerHTML=
'<select>option value="dev">coding</option>>option value="rev">review</option value="fix">fixed</option>>>> select;
row_3.appendChild(row_3_data_1);
row_3.appendChild(row_3_data_2);
tbody.appendChild(row_3);
};
The error message is as follows:
Occurs when the Add a Column button is pressed.
Uncaught ReferenceError: table is not defined at HTMLInputElement.onclick (index.html:1:27)
Uncaught ReferenceError: table is not defined at HTMLInputElement.onclick (index.html:22:109)
2022-09-30 20:25
1 Answers
I don't understand what insertColumn means to take the argument table, but somehow I guess insertColumn has no argument, that is, JavaScript code is concertColumn=()=>{ and calls insertColumn(.
2022-09-30 20:25
If you have any answers or tips
Popular Tags
python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
© 2024 OneMinuteCode. All rights reserved.