如何從輸入中獲取值並在表格模式中顯示它們？

Question

我想獲取“輸入”中的所有值並使用 js 在模態表中顯示它們。 我怎樣才能做到這一點？ 我的腳本：

<script>
            $(document).ready(function() {
                $(document).on('click', '.save', function() {
                var id = $(this).val();
                var name = $('#name' + id).val();
                $('#edit').modal('show');
                $('#sname').val(name);
                });
            });
</script>

我的模態

 <!-- The Modal -->
            <div class="modal" id="edit">
                <div class="modal-dialog">
                    <div class="modal-content">
                    <!-- Modal Header -->
                        <div class="modal-header">
                            <h4>If you are sure of the information you entered, press the "OK" button</h4>
                        </div>
                    <!-- Modal body -->
                        <div class="modal-body" >
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th scope="row">Full name</th>
                                        <td>
                                             <input class="form-control" id="sname">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
       
                        <!-- Modal footer -->
                        <div class="modal-footer">
                            <button type="submit" name="action" class="btn btn-outline-primary" onclick="return validateForm();" value="Save" >OK</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Back</button>
                        </div>
                        </div>
                    </div>
                </div>
            </div>

輸入數據的表格

<s:form name="myForm" action="saveProcess" items="${employeeList}" var="e" modelAttribute="employee" style="margin-top: 100px;" onsubmit="return validateForm()">
            <div class="form-group">
                <s:input type="hidden" path="id" class="form-control"placeholder="Enter Id" />
            </div>
            <div class="form-group">
                <label>Full name</label>
                <s:input path="fullname" type="text" id="name" placeholder="Enter Fullname" class="form-control" name="fullname" style="width: 500px; margin-top:-39px; margin-left: 150px"/>       
            </div>
            
            <div class="container">
                <button  onclick="return validateForm();" type="button" class="btn btn-outline-primary save" style="position: relative; left: 200px; border-radius: 8px"  >
                    Save
                </button>
            </div>
        </s:form>
  

現在，當我在輸入中輸入數據並單擊 btn 保存時，而不是使用輸入，我該如何使用 label、td、...？？？？

Answer 1

很難准確解析你的問題，但我認為這就是你的意思嗎？ 只需給 td 一個唯一的 id 或 class ，然后使用html()修改其內容。

javascript

$( '#label_td' ).html( name );

html

<tr>
    <th scope="row">Full name</th>
    <td id="label_td"></td>
</tr>