0

嗨，我无法弄清楚如何使我的行可编辑

html:

  <body>
      <div>
        <button>Get</button>
        <div id="table"></div>
      </div>
        
        </tbody>
        </table>
    </body>

我有一个参与者，当我更改 html 表时我也想更改

与参与者相关的 Javascript：

     function Participant(id, name) {
    this.id = id;
    this.name = name;
    }

var participantArray = []; 

//Used to get data from xml into the Participant and then add him to the array

   var xpartic = xmlDoc.getElementsByTagName("participant");
   for (i = 0; i < xpartic.length; i++) {
    participanttxt += "Participant - " + "Id: " + xpartic.item(i).getAttribute("id") + " Name: " + xpartic.item(i).getAttribute("name") + "\n" ;
    var novo = new Participant(xpartic.item(i).getAttribute("id"),xpartic.item(i).getAttribute("name"));
    
    this.addtoArray = function(){
          participantArray.push(novo)
    }();
    }
   console.log(participantArray);

与表格相关的 Javascript：我不知道如何允许行可编辑

let btnGet = document.querySelector('button');


   let myTable = document.querySelector('#table');



// criação das tabelas

let headers = ['ID', 'NAME'];

btnGet.addEventListener('click', () => {
  let table = document.createElement('table');
  let headerRow = document.createElement('tr');

  headers.forEach(headerText => {
      let header = document.createElement('th');
      let textNode = document.createTextNode(headerText);
      header.appendChild(textNode);
      headerRow.appendChild(header);
  });

  table.appendChild(headerRow);

  participantArray.forEach(emp => {
      let row = document.createElement('tr');

      Object.values(emp).forEach(text => {
          let cell = document.createElement("td");
          let textNode = document.createTextNode(text);
          cell.appendChild(textNode);
          row.appendChild(cell);
      })

      table.appendChild(row);
  });

  myTable.appendChild(table);
});

这会生成以下内容：

https://imgur.com/a/zyxQd32

我希望能够更改这些行，然后对数组执行类似的操作

onTableAlter(){
    for(...){
    if(altered.id==participant.id){
    participant.name=altered.name
    }
    }
}

当该表被更改时。

我很感激任何帮助！

4

0 回答 0