

JavaScriptで生成したTableにあるボタンに、関数（insertColumn）を実装したいです。  
現在、プログラムでエラーが出ているので解決策を教えてください。  
HTMLは`<input type="button" class="AddCln" value="Add a Column"
onclick="insertColumn(table)">`の部分、JSは`const insertColumn=(table)=>{ // Add a
column to a Table let tbl = document.getElementById(this.closest(table)); let
cell_1 = tbl.rows[0].insertCell(1);`  
の部分でエラーが発生しています。  
宜しくお願いします。

HTML

[code]

        <!doctype html>
        <html class="no-js" lang="">
        
        <head>
          <meta charset="utf-8">
          <title>
            ProjectManagementSystem
          </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')">
          <div id="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>
    
[/code]

JavaScript

[code]

    //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.closest(table));
        let cell_1 = tbl.rows[0].insertCell(1);
        cell_1.innerHTML = '<input type="date">';
        let cell_2 = tbl.rows[1].insertCell(1);
        cell_2.innerHTML = '<input type="text" placeholder="Input your Name">';
        let cell_3 = tbl.rows[2].insertCell(1);
        cell_3.innerHTML = '<select><option value="dev">coding</option><option value="rev">review</option><option value="fix">fixed</option></select>';
    };
    
    
    
    
        //2-Function to Create a new Table
        const addPrj=(PMS)=>{
            //Get tag's IDs from the Table
            let $prjName = document.getElementsByClassName('prjName');
            let prjName =$prjName.length;
            let tableID = "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 thead = document.createElement('thead');
        let tbody = 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
        let row_1 = document.createElement('tr');
        let heading_1 = document.createElement('th');
        heading_1.innerHTML = '<input type="button" value="Add a Column" onclick="insertColumn(this.closest(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
        let row_2 = document.createElement('tr');
        let row_2_data_1 = document.createElement('td');
        row_2_data_1.innerHTML = "PIC";
        let row_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
        let row_3 = document.createElement('tr');
        let row_3_data_1 = document.createElement('td');
        row_3_data_1.innerHTML = "Task";
        let row_3_data_2 = document.createElement('td');
        row_3_data_2.innerHTML = 
        '<select><option value="dev">coding</option><option value="rev">review</option><option value="fix">fixed</option></select>';
    
        row_3.appendChild(row_3_data_1);
        row_3.appendChild(row_3_data_2);
        tbody.appendChild(row_3);
    
    };
    
[/code]

エラーメッセージは以下の通りです。  
Add a Columnボタン押下で発生します。

[code]

    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)
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/2idVo.png)](https://i.stack.imgur.com/2idVo.png)


CC BY-SA 4.0
2022-05-08T10:08:47.863
88704
2022-05-08T16:15:52.910
2022-05-08T16:15:52.910
3060
44479
question
javascript html
JavaScriptで作成したTableのボタンで、関数（function）を作動させたい。


`insertColumn`が引数`table`を取るようにした意味が理解できないのですが、なんとなく推察するに、`insertColumn`は引数なし、つまりJavaScriptコードは`const
insertColumn=()=>{`で、呼び出しは`insertColumn()`で良いのでは。


CC BY-SA 4.0
2022-05-08T14:08:46.183
88710
2022-05-08T14:08:46.183
45045
88704
answer