如何在jQuery中用HTML表行數據動態替換Texarea內容？

Question

單擊預覽時，我需要替換HTML表格行中的textarea內容，並根據表格數據顯示預覽。 而且，HTML數據不會保持相同的標頭值，因為它會根據用戶交互/上傳動態變化。

用戶在文本區域框中輸入內容，如下所示：

<textarea name="message">Hello {FIRST NAME) {LAST NAME}, please pay {AMOUNT} by the end of this month.</textarea>

我嘗試使用以下代碼：

$(document).on("click", ".previewCustom", function (t) {
        t.preventDefault();
        var msg = $("textarea[name=message]").val();
        $("tr.table").click(function () {
            var tableData = $(this).children("td").map(function () {
                return $(this).text();
            }).get();

            console.log(tableData)
        });
    });

HTML表格代碼：

    <table id="previewTableId" class="table table-bordered">
    <tbody>
        <tr>
            <th class="text-center" id="A">First Name</th>
            <th class="text-center" id="B">Last Name</th>
            <th class="text-center" id="C">Amount</th>
            <th class="text-center" id="D">Preview</th>
        </tr>
        <tr>
            <td class="text-center First_Name">Joe</td>
            <td class="text-center Last_Name">Sam</td>
            <td class="text-center Amount">1000</td>
            <td><span class="btn btn-xs btn-warning previewCustom">Preview</span></td>
        </tr>
        <tr>
            <td class="text-center First_Name">Sam</td>
            <td class="text-center Last_Name">Joe</td>
            <td class="text-center Amount">5000</td>
            <td><span class="btn btn-xs btn-warning previewCustom">Preview</span></td>
        </tr>
        <tr>
            <td class="text-center First_Name">aaa</td>
            <td class="text-center Last_Name">bbbb</td>
            <td class="text-center Amount">3000</td>
            <td><span class="btn btn-xs btn-warning previewCustom">Preview</span></td>
        </tr>
    </tbody>
</table>

我希望通過在單擊預覽按鈕后，將基於文本區域內容的表格單元格值替換為特定表格行模式中的HTML表格行數據來顯示最終結果，以顯示最終結果

您好喬山姆，請在本月底之前支付1000。

請注意，表數據的標題可能因用戶而異，因此不能使用修訂類名稱或屬性。

Answer 1

您可以嘗試以下方法：

 //target to textarea const $textArea = $("textarea[name=message]"); $(document).on("click", ".previewCustom", function () { // target to $(this) that's the current span clicked // getting his parent() means <td> // getting his siblings() means x3<td> // using map to get his HTML text for each element // using spread operator to get it as list of strings const data = [...$(this).parent().siblings().map((index, el) => $(el).html())] // setting textarea value with data array strings values let textAreaWithData = `Hello ${data[0]} ${data[1]}, please pay ${data[2]} by the end of this month.` $textArea.val(textAreaWithData) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea name="message">Hello {FIRST NAME) {LAST NAME}, please pay {AMOUNT} by the end of this month.</textarea> <table id="previewTableId" class="table table-bordered"> <tbody> <tr> <th class="text-center" id="A">First Name</th> <th class="text-center" id="B">Last Name</th> <th class="text-center" id="C">Amount</th> <th class="text-center" id="D">Preview</th> </tr> <tr> <td class="text-center First_Name">Joe</td> <td class="text-center Last_Name">Sam</td> <td class="text-center Amount">1000</td> <td><span class="btn btn-xs btn-warning previewCustom">Preview</span></td> </tr> <tr> <td class="text-center First_Name">Sam</td> <td class="text-center Last_Name">Joe</td> <td class="text-center Amount">5000</td> <td><span class="btn btn-xs btn-warning previewCustom">Preview</span></td> </tr> <tr> <td class="text-center First_Name">aaa</td> <td class="text-center Last_Name">bbbb</td> <td class="text-center Amount">3000</td> <td><span class="btn btn-xs btn-warning previewCustom">Preview</span></td> </tr> </tbody> </table> 

Answer 2

以下在標題元素上使用特殊的類以及需要從當前textarea值中替換的數據屬性

首先存儲這些標題placholder的數組及其列索引，然后在每次單擊按鈕以解析新字符串時循環遍歷該數組

這樣，所需的元數據就全部放在標題行上，並且數據行單元格根本不需要任何特殊的類

 // array of heading values with column index and placeholder values var headData = $('.msg-heading').map(function() { return { pHolder: $(this).data('placeholder'), colIdx: $(this).index() } }).get(); var $txtArea = $('textarea[name=message]'); // store message template var storedMsg = $txtArea.val(); $(document).on("click", ".previewCustom", function(t) { t.preventDefault(); var $cells = $(this).closest('tr').children(); var msg = storedMsg; // loop through headings to figure out which cell index text to replace in message template headData.forEach(function(item) { // stored column index tells us which cell in row to get text from var text = $cells.eq(item.colIdx).text(); // replace that placeholder in message string msg = msg.replace('{' + item.pHolder + '}', text); }); // update textarea with new string $txtArea.val(msg) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea name="message" style="width:100%">Hello {FIRST} {LAST}, please pay {AMOUNT} by the end of this month.</textarea> <table id="previewTableId" class="table table-bordered"> <tbody> <tr> <th class="msg-heading" data-placeholder="FIRST">First Name</th> <th class="msg-heading" data-placeholder="LAST">Last Name</th> <th class="msg-heading" data-placeholder="AMOUNT">Amount</th> <th>Preview</th> </tr> <tr> <td>Joe</td> <td>Sam</td> <td>1000</td> <td><span class="previewCustom">Preview</span></td> </tr> <tr> <td>Sam</td> <td>Joe</td> <td>5000</td> <td><span class="previewCustom">Preview</span></td> </tr> <tr> <td>aaa</td> <td>bbbb</td> <td>3000</td> <td><span class="previewCustom">Preview</span></td> </tr> </tbody> </table> 

Answer 3

您可以使用以下代碼：

var statement = "Hello FIRST_NAME LAST_NAME, please pay AMOUNT by the end of this month.";
$(document).ready(function() {
    $(".previewCustom").click(function () {
        var row = $(this).parent().parent();
        debugger;
        var fname = $($(row).find("td")[0]).html();
        var lname = $($(row).find("td")[1]).html();
        var amount = $($(row).find("td")[2]).html();
        debugger;
        statement = statement.replace("FIRST_NAME",fname);
        statement = statement.replace("LAST_NAME",fname);
        statement = statement.replace("AMOUNT",fname);
        $("#message").val(statement);

        console.log(row);
    });
});

您實際上也可以替換該變量。 如果您的文字不同。 謝謝。