如何在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);
    });
});

您实际上也可以替换该变量。 如果您的文字不同。 谢谢。