Remove the input and maintain the value in td js



  • A table

    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    

    When compressed on td, a input appears at its coordinates, how to do so that after other input values have been introduced, the input is removed and the value retained, the net js is interested without jquery. Here's the code:

    var d = document,
           td = d.getElementsByTagName('td');
    
       Object.keys(td).map( function(item) {
    
            var coordinates = td[item].getBoundingClientRect();
                td[item].innerHTML = coordinates.left + coordinates.top + coordinates.right + coordinates.bottom;
    
           var input = document.createElement('input');
               input.setAttribute('type','text');
               input.value = td[item].innerHTML;
    
    
            td[item].addEventListener("click", function(){
                td[item].innerHTML = "";
                td[item].appendChild(input);
           },false);
    
       });
    



  • Put it in the cell. input♪ you're taking it for him ♪ display:none♪ Then for action. onclick by td Write:

    document.getElementById("yourTD").style.display = "block";
    



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2