javascript - 当按下按钮进入输入时获取表格 div 内容

Question

我想获取每行的内容并将其写入输入，但我无法完成这项工作。

<table>
    <tbody>
        <tr>
            <td>
                <div id="a">abc</div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="b">abcd</div>
            </td>            
        </tr>
        <tr>
            <td>
                <div id="c">abcdf</div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="d">abcde</div>
            </td>
        </tr>
        <tr>
            <td>
                <button class="magicButton">choose this row</button>
            </td>
        </tr>
    </tbody>
</table>

$(document).ready(function(){
    $('.magicButton').click(function(){
        // insert text of div a into input
        // insert text of div b into input
        // ect
    });
});

一旦按下按钮，它就会将此值写入以下内容

<input type="text" name="whatver" div="fromValueA" readonly>
<input type="text" name="whatver" div="fromValueB" readonly>
<input type="text" name="whatver" div="fromValueC" readonly>
<input type="text" name="whatver" div="fromValueD" readonly>

我到底怎样才能让它不只是使用所有制作的按钮中相同的 A、B 、C

最美好的祝愿，迈克

Answer 1

使用 jquery replaceWith() 方法将 div 替换为 input。

$("button").click(function(){
    $("table td > div").replaceWith(function(index, text){
        var id = "fromValue" + $(this).attr("id");
        return "<input id='" + id + "' value='" + text + "' />";
    });
});

table, tr, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <div id="a">A</div>
        </td>
     </tr> 
     <tr>
        <td>
            <div id="b">B</div>
        </td>
     </tr> 
     <tr>
        <td>
            <div id="c">C</div>
        </td>
     </tr> 
     <tr>
        <td>
            <button>Change</button>
        </td>
     </tr> 
</table>