如何从输入中检索文本

Question

I have an edit button, on click every td in the row will become input text, in my code it works, but the problem is that I can't find a way to retrieve the text in the input so i can save it later.

   function Edit(clickedButton){
        var getTR = clickedButton.closest('tr');
        var getLength = getTR.childElementCount;
        var getTds = getTR.querySelectorAll("td")

        for (i in getTds) {
            if(i < (getLength-1)) {
                getTds[i].innerHTML = "<input  type='text' value='"+getTds[i].innerHTML+"'>";
            }       
        }

    }

Answer 1

Get it by the id

document.getElementById('textbox_id').value

or

Get it by the class

document.getElementsByClassName('class_name')[element_index].value

or get it by the tag name

document.getElementsByTagName('tag_name')[whole_number].value

Answer 2

In your loop body add an event listener to the created input, for example bind to blur event to do something with the value once the input loses focus:

getTds[i].innerHTML = "<input  type='text' value='"+getTds[i].innerHTML+"'>";
getTds[i].getElementsByTagName('input')[0].addEventListener('blur', function(){
    console.log( this.value );
})

simplified example: http://jsfiddle.net/Lr08emod/