I don't know if i expressed myself correctly in the title, but i have the following doubt.

The ideia is a table with users request. The table has static text. When the user clicks on the button 'Editar (Edit)' the fields on the row that he clicked transform into Select Inputs. When the user select the value of the input that he needed, he would click on "Save" and the fields would become static again with the value selected. I know how to save the value from the Select Inputs, but i dont know how to make the Select Input appears when the user clicks on 'Editar (Edit)'

This is the code that transforms the value that the user chose in a Select Input to a string:

let teste2 = document.getElementsByClassName('selectTotal')[0]
let teste3 = document.getElementsByTagName('td')[2]
let teste1 = document.getElementsByClassName('selectTotal')[0].value
let teste1tam = document.getElementsByClassName('selectTotal').length
let m = document.getElementsByClassName('editar')
let mar = document.getElementsByClassName('editar').length
for(i = 0; i<mar; i  ){
  m[i].addEventListener("click", function(event){
    if(document.getElementsByClassName('selectTotal')[0].value == 'Liberação de Acesso'){
      teste2.value = 'Liberação de Acesso'
      teste3.innerHTML = 'Liberação de Acesso'
    } else if (document.getElementsByClassName('selectTotal')[0].value == 'Sistema Lento'){
      teste2.value = 'Sistema Lento'
      teste3.innerHTML = 'Sistema Lento'
    } else if (document.getElementsByClassName('selectTotal')[0].value == 'Problema'){
      teste2.value = 'Problema'
      teste3.innerHTML = 'Problema'
    }
  })
}

This is the HTML table:

        <tr>
          <td scope="row" class='zeroCol'>1</td>
          <td class='primeiraCol'>teste</td>
          <td class='segundaCol'>
            <label for="setorSelect"></label>
            <select name="urgencias" id="setorSelect" class='selectTotal'>
              <option value="Liberação de Acesso">Liberação de Acesso</option>
              <option value="Sistema Lento">Sistema Lento</option>
              <option value="Problema">Problema</option>
            </select>
          </td>
          <td class='terceiraCol'>teste</td>
          <td class='quartaCol'>
            <label for="tipoSelect"></label>
            <select name="urgencias" id="tipoSelect" class='selectTotal'>
              <option value="Liberação de Acesso">Liberação de Acesso</option>
              <option value="Sistema Lento">Sistema Lento</option>
              <option value="Problema">Problema</option>
            </select>
          </td>
          <td class='quintaCol'>Aberto</td>
          <td class='sextaCol'></td>
          <td class='setimaCol'>uuuuu</td>
          <td class='oitavaCol'><textarea name="name" rows="2" cols="40"
              readonly>Salvar Chat dia José Pode fazer o favor de verificar para liberar o acesso da pasta PCP no computador do lider André . precisa de alguma liberação do Diego ? Att Sabrina</textarea>
          </td>
          <td class='nonaCol'>
            <button type="button" class="btn btn-success acoes-botao">Salvar</button>
            <button type="button" class="btn btn-success acoes-botao">Chat</button>
            <button type="button" class="btn btn-success acoes-botao editar">Editar</button>
            <button type="button" class="btn btn-danger acoes-botao">Aprovação</button>
          </td>
        </tr>

CodePudding user response：

Something like this?

function save() {
  document.getElementById("setorSelect").disabled = true;
  document.getElementById("tipoSelect").disabled = true;
}

function edit() {
  document.getElementById("setorSelect").disabled = false;
  document.getElementById("tipoSelect").disabled = false;
}

You could of course switch out spans/labels/whatever for selects, but this pretty much does the trick without too much work. Little bit of CSS to make it look less like a disabled select and you're done. You could also just itterate over those selects and disable them (handy if you're going to add more).

Here's an example fiddle: https://jsfiddle.net/TokerX/q4st938e/

If you really want to switch out labels for selects and vice versa:

function save() {
  document.getElementById("setorSelectLabel").innerHTML = document.getElementById("setorSelect").value;
  document.getElementById("tipoSelectLabel").innerHTML = document.getElementById("tipoSelect").value;
  document.getElementById("setorSelect").classList.add("hidden");
  document.getElementById("setorSelectLabel").classList.remove("hidden");
  document.getElementById("tipoSelect").classList.add("hidden");
  document.getElementById("tipoSelectLabel").classList.remove("hidden");
}

function edit() {
  document.getElementById("setorSelect").classList.remove("hidden");
  document.getElementById("setorSelectLabel").classList.add("hidden");
  document.getElementById("tipoSelect").classList.remove("hidden");
  document.getElementById("tipoSelectLabel").classList.add("hidden");
}

Updated fiddle: https://jsfiddle.net/TokerX/q4st938e/1/