如何在jQuery中用HTML表行数据动态替换Texarea内容？

Question

I need to replace the textarea content from the HTML table row when preview clicked and show the preview as per the table data. Moreover the HTML data does not remain consistent with same header values as its dynamically changes as per the user interactions/uploads.

Users enter the content in a textarea box as follow:

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

I tried with the following code:

$(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 Code:

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

I am expecting to show the final result by replacing table cell values based on the textarea content with HTML table row data in a modal of the specific table row after clicking on preview button as

Hello Joe Sam, please pay 1000 by the end of this month.

Please note as header of the table data may vary user to user so can't use fix class names or attributes.

Answer 1

You could try this:

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

Following uses a special class on the heading elements along with a data attribute for what needs replacing from the current textarea value

You first store an array of these heading placholders as well as their column index and then loop through that array every time button is clicked to parse new string

This way, the meta data needed is all on the heading row and the data row cells don't need any special classes at all

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

You can use below code :

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

You can actually replace that variable as well. If your text is different. Thank you.