How to change column text by javascript?

Question

I made an effect using DRAG AND DROP that is nothing more than dragging a block to another trello-style column. Inside this block I would like to exchange a status text for when it leaves from TO-DO to DONE ai the status label would be Status: DONE

Code below:

 <table id="data-table-buttons" class="table table-striped table-bordered table-td-valign-middle">
                        <thead>
                            <tr>

                                <th class="text-nowrap text-center">TO DO</th>
                                <th class="text-nowrap text-center">DOING</th>
                                <th class="text-nowrap text-center">DONG</th>
                                <th class="text-nowrap text-center">DERIVED</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="largura-tabela col-lg-3" ondrop="drop(event)" ondragover="allowDrop(event)">
                                    <div id="drag1" draggable="true" ondragstart="drag(event)">
                                        <div class="widget widget-stats bg-blue">
                                            <div class="stats-icon"><i class="fa fa-thumbs-up"></i></div>
                                            <div class="stats-info">
                                                <h4>TICKET: 001</h4>
                                                <h4>TITULO: TESTE 01</h4>
                                                <h4 id="status">ESTADO: TO DO</h4>

                                                <p>BAIXA PRIORIDADE</p>
                                            </div>
                                            <div class="stats-link">
                                                <a href="javascript:;">DETALHES DA OCORRÊNCIA <i class="fa fa-arrow-alt-circle-right" data-toggle="tooltip" data-placement="right" title="Alguma descrição da ocorrência"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
                                <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)">
                                    <div id="drag2" draggable="true" ondragstart="drag(event)" >
                                        <div class="widget widget-stats bg-danger">
                                            <div class="stats-icon"><i class="fa fa-exclamation"></i></div>
                                            <div class="stats-info">
                                                <h4>TICKET: 002</h4>
                                                <h4>TITULO: TESTE 02</h4>
                                                <h4 id="status">ESTADO: DONG</h4>
                                                <p>ALTA PRIORIDADE</p>
                                            </div>
                                            <div class="stats-link">
                                                <a href="javascript:;">DETALHES DA OCORRÊNCIA <i class="fa fa-arrow-alt-circle-right" data-toggle="tooltip" data-placement="right" title="Alguma descrição da ocorrência""></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)">
                                    <div id="drag3" draggable="true" ondragstart="drag(event)">
                                        <div class="widget widget-stats bg-warning">
                                            <div class="stats-icon"><i class="fa fa-question"></i></div>
                                            <div class="stats-info">
                                                <h4>TICKET: 003</h4>
                                                <h4>TITULO: TESTE 02</h4>
                                                <h4 id="status">ESTADO: DERIVED</h4>
                                                <p>MÉDIA PRIORIDADE</p>
                                            </div>
                                            <div class="stats-link">
                                                <a href="javascript:;">DETALHES DA OCORRÊNCIA <i class="fa fa-arrow-alt-circle-right" data-toggle="tooltip" data-placement="right" title="Alguma descrição da ocorrência"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </td>

                            </tr>

                        </tbody>
                    </table>

Javascript

  function status(msg) {
          document.getElementById('status').id = "teste";
    }


    function allowDrop(ev) {

        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
        status("TESTA" + e.target.getAttribute('id'));
    }

Answer 1

var cols = Array.prototype.slice.call(document.querySelectorAll('#data-table-buttons td.largura-tabela'));
var tituloCols = Array.prototype.slice.call(document.querySelectorAll('#data-table-buttons th'));

function status(msg) {
  document.getElementById('status').id = "teste";
}

function allowDrop(ev) {

  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();

  var data = ev.dataTransfer.getData("text");
  var item = document.getElementById(data);
  var col = cols.find(t => t.contains(ev.target));

  if (col != null && !col.contains(item)) {
    var index = cols.indexOf(col);

    var titulo = tituloCols[index].innerText;

    item.querySelector('.stats-info #status').innerText = 'ESTADO: ' + titulo;

    col.appendChild(item);
  }
}

<table id="data-table-buttons" class="table table-striped table-bordered table-td-valign-middle">
  <thead>
    <tr>
      <th class="text-nowrap text-center">TO DO</th>
      <th class="text-nowrap text-center">DOING</th>
      <th class="text-nowrap text-center">DONG</th>
      <th class="text-nowrap text-center">DERIVED</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="largura-tabela col-lg-3" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="drag1" draggable="true" ondragstart="drag(event)">
          <div class="widget widget-stats bg-blue">
            <div class="stats-icon"><i class="fa fa-thumbs-up"></i></div>
            <div class="stats-info">
              <h4>TICKET: 001</h4>
              <h4>TITULO: TESTE 01</h4>
              <h4 id="status">ESTADO: TO DO</h4>

              <p>BAIXA PRIORIDADE</p>
            </div>
            <div class="stats-link">
              <a href="javascript:;">DETALHES DA OCORRÊNCIA <i class="fa fa-arrow-alt-circle-right" data-toggle="tooltip" data-placement="right" title="Alguma descrição da ocorrência"></i></a>
            </div>
          </div>
        </div>
      </td>
      <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
      <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="drag2" draggable="true" ondragstart="drag(event)">
          <div class="widget widget-stats bg-danger">
            <div class="stats-icon"><i class="fa fa-exclamation"></i></div>
            <div class="stats-info">
              <h4>TICKET: 002</h4>
              <h4>TITULO: TESTE 02</h4>
              <h4 id="status">ESTADO: DONG</h4>
              <p>ALTA PRIORIDADE</p>
            </div>
            <div class="stats-link">
              <a href="javascript:;">DETALHES DA OCORRÊNCIA <i class="fa fa-arrow-alt-circle-right" data-toggle="tooltip" data-placement="right" title="Alguma descrição da ocorrência""></i></a>
            </div>
          </div>
        </div>
      </td>
      <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="drag3" draggable="true" ondragstart="drag(event)">
          <div class="widget widget-stats bg-warning">
            <div class="stats-icon"><i class="fa fa-question"></i></div>
            <div class="stats-info">
              <h4>TICKET: 003</h4>
              <h4>TITULO: TESTE 02</h4>
              <h4 id="status">ESTADO: DERIVED</h4>
              <p>MÉDIA PRIORIDADE</p>
            </div>
            <div class="stats-link">
              <a href="javascript:;">DETALHES DA OCORRÊNCIA <i class="fa fa-arrow-alt-circle-right" data-toggle="tooltip" data-placement="right" title="Alguma descrição da ocorrência"></i></a>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>