Append text from url tag in table column to textarea with javascript

I have a html script with a form like this.

<table id="LinkData">
    <thead>
        <tr>
            <th>#</th>
            <th>Web URL</th>
            <th>Point</th>
            <th>Action</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><a href='http://fruit-apricot.fr' id='frUrl' placeholder='Apricot'>Apricot</a></td>
            <td>123</td>
            <td><button id='edtData'>Edit</button> | <button id='delData'>Delete</button></td>
        </tr>
        <tr>
            <td>2</td>
            <td><a href='http://fruit-avocado.fr' id='frUrl' placeholder='Avocado'></a>Avocado</td>
            <td>456</td>
            <td><button id='edtData'>Edit</button> | <button id='delData'>Delete</button></td>
        </tr>
        <tr>
            <td>3</td>
            <td><a href='http://fruit-banana.fr' id='frUrl' placeholder='Banana'>Banana</a></td>
            <td>789</td>
            <td><button id='edtData'>Edit</button> | <button id='delData'>Delete</button></td>
        </tr>
        <tr>
            <td>4</td>
            <td><a href='http://fruit-bilberry.fr' id='frUrl' placeholder='Bilberry'>Bilberry</a></td>
            <td>134</td>
            <td><button id='edtData'>Edit</button> | <button id='delData'>Delete</button></td>
        </tr>
        <tr>
            <td>5</td>
            <td><a href='http://fruit-blackberry.fr' id='frUrl' placeholder='Blackberry'></a>Blackberry</td>
            <td>154</td>
            <td><button id='edtData'>Edit</button> | <button id='delData'>Delete</button></td>
        </tr>
    </tbody>
</table>
<button id='crtList'>Crete List</button><br>
<textarea id='txtList' width='150px' height='200px'></textarea>

I need to take the existing text in a placeholder or url text of the column in the table to insert into the textarea that I have provided.

I need a javascript that can do so via click on the button "Create List". I try to do, but often only one text just appeared. I'm using javascript:

$(document).on("click", "#crtList", function(){
    var a = $("#frUrl");
    var i = -1;
    var myText = $("#txtList");
    while (++i < a.length) {
        if (a[i].href.indexOf("fruit") > 0) {
            var fr = document.getElementsByTagName("a")[i].getAttribute("placeholder"); 
        }
    }
    myText.append(fr + ", ")
});

I need to copy all the text in tag into the textarea. I want results might look like this:

Apricot, Avocado, Banana, Bilberry, Blackberry, 

thanks for your help and for your reference.

Answers 1

  • From what I'm understanding in your post, this is the JS/jQuery you are looking for:

    var totalLength = $('*[id*="frUrl"]').length;
    
    $('#crtList').click(function() {
      $('*[id*="frUrl"]').each(function(index) {
        if (index === totalLength - 1) {
          $('#txtList').append($(this).attr('placeholder') + '.');
        } else {
          $('#txtList').append($(this).attr('placeholder') + ', ');
        }
      });
    });
    

    This takes all of the placeholder values after clicking the 'Create List' button and appends them to the specified list. In addition, the values are comma separated and a period is added to the last item in the list.


Related Articles