Question

我有一个table tr, tds并且跨越了td，所以我想要到达跨度内的文本，这样我可以在单击编辑按钮时将其更改为输入那是我到目前为止所做的，但它不起作用：

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+"'>";
        }       
    }
}

Answer 1

在下面的评论和另一个答案的讨论之后 - 我认为这是想要的

假设该表看起来像这样

<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>

此代码应该这样做

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]);
        }       
    }
}

Answer 2

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

＆＃13;

function edit() {
  var span = document.querySelector('.mySpan');
  var input = document.createElement('input');
  input.type='text';
  input.value = span.innerHTML;
  span.innerHTML = '';
  span.appendChild(input)
}

＆＃13;

<span class="mySpan">this is inside a span</span>
<button onclick="edit()">edit</button>

＆＃13;

Answer 3

你需要做这个创建元素并追加

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

将跨区文本更改为输入文本

3 个答案: