Javascript 将跨距文本更改为输入文本

我有一个

表格

，带有

tr、tds

和td内的span，因此我想访问span内的文本，以便在单击编辑按钮时将其更改为输入 这是我目前为止尝试过的，但不起作用：

function editRow(clickedButton){

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

    for (i=0;i<=5;i++) {
        if(i < (getLength-1)) {
            var spanText="";
            spanTexts = getTds[i].getElementsByTag('span');
            spanTexts[i].innerHTML = "<input  type='text' value='"+getTds[i].innerHTML+"'>";
        }       
    }
}

函数编辑行（单击编辑按钮）{
var getter=clickedButton.closest（'tr'）；
var getLength=getr.childElementCount；
var getTds=getter.querySelectorAll（“td”）
对于（i=0；i，在下面的评论和另一个答案中的讨论之后-我认为这就是想要的

假设桌子看起来像这样

<table>
    <tbody>
        <tr>
            <td><input type="button" value="edit" /></td>
            <td><span>Row 1 Column 1</span></td>
            <td><span>Row 1 Column 2</span></td>
            <td><span>Row 1 Column 3 Span 1</span><span>Row 1 Column 3 Span 2</span></td>
            <td><span>Row 1 Column 4</span></td>
        </tr>
    </tbody>
</table>


第1行第1列
第1行第2列
第1行第3栏第1栏第3栏第2栏
第1行第4列

这段代码应该可以做到这一点

function editRow(clickedButton) {
    var getTR = clickedButton.parentElement.parentElement;
    var getTds = getTR.querySelectorAll("td")

    for (var i = 0; i <= getTds.length; i++) {
        spans = getTds[i].querySelectorAll('span');
        for(var j = 0; j < spans.length; j++) {
            var spanText = spans[j].textContent;
            var input = document.createElement('input');
            input.type = 'text';
            input.value = spanText;
            getTds[i].replaceChild(input, spans[j]);
        }       
    }
}

函数编辑行（单击编辑按钮）{
var getter=clickedButton.parentElement.parentElement；
var getTds=getter.querySelectorAll（“td”）
对于（var i=0；i您需要像这样创建元素并追加

var text = getTds[i].innerHTML;
getTds[i].innerHTML = "";
var input = document.createElement("input");
input.type = "text";
input.setAttribute('value', text);
getTds[i].getElementsByTagname('span').appendChild(input); // put it into the DOM

你可以试试这样的。
它将输入放在范围内


函数编辑（）{
var span=document.querySelector（'.mySpan'）；
var input=document.createElement（'input'）；
input.type='text'；
input.value=span.innerHTML；
span.innerHTML=''；
span.appendChild（输入）
}
这在一个跨度内
编辑此代码行时出错：spantext=getTds[i]。getElementsByTag（'span'））；我认为你的答案是不正确的，因为它是一个循环，我不想只使用第一个span每个
td
是否有多个
span
-你需要另一个循环，因为我从你的下一个问题中看到，每个td只有一个span-因此你上面的第一个注释与span无关，它将附加到span，而不是替换t的内容这是我得到的错误：uncaughttypeerror:getds[I].getElementsByTag不是一个function@JaromandaX-OP正在尝试为需要创建控件的对象添加一个输入控件，而不是添加innerhtmlwork@PranayRana-不，他想
到达span内的文本，以便我可以将其更改为input
-这就是将span的内容更改为input，而不是将input附加到t外部输入span@JaromandaX-他想用texbox替换span文本，用span的html…append将child添加到span…我认为您应该对给出的答案做出回应。。。