JQuery Adding Row to Table, Row is Undefined

Question

I'm relatively new to HTML/JQuery. I'm currently trying to add a row from one table to another table with an onclick function. Here is the table containing the rows I want to add if clicked on:

<table class="tables" id="playerSearchTable" >
    <% for (var i = 0; i < res1.length; i++) { %>
        <form>
            <tr class="player_search_tr">
                <td class="playerTeamTableName1<%=i%>" id="player_name_submit" width="250px"><%= res1[i].Name %></td>
                <input type="hidden" id="player_name<%=i%>" value="<%= res1[i].Name %>" />
                <input type="hidden" id="player_pos<%=i%>" value="<%= res1[i].position_summary %>" />
                <td  width="90px" style="padding-left: 25px;" ><%= res1[i].position_summary %></td>
                <td  class="playerTeamTableName" width="90px" style="padding-left: 25px;"><%= res1[i].team_abbrv %></td>
                <td  width="120px" style="padding-left: 25px;"><%= res1[i].league_abbrv %></td>
           </tr>
       </form>
   <% } %>
</table>

And here is my function:

$(document).ready(function(){
    ul = document.getElementById("playerSearchTable");
    li = ul.getElementsByTagName('tr');
    for (i = 0; i < li.length; i++) {
        player_name = li[i].getElementsByClassName("playerTeamTableName1"+i);
        $(player_name).click(function(){
            var name = $("#player_name" + i).val();
            var pos = $("#player_pos" + i).val();
            player_table_list = document.getElementById("playerSearchTable1");
            var markup = "<tr class=\"player_search_tr\"><td width=\"60px\"></td><td width=\"300px\">" + name + "</td><td width=\"90px\">" + pos + "</td></tr>";
            $('#playerSearchTable1').append(markup);
         });
     }
});

However, when I run the code above the rows that get inserted contain the value "undefined" for each cell. What am I missing here?

What are `<% %>` for (PHP?)? Also, why do you have each table row wrapped with a `form` tag? That's incorrect. If you aren't submitting data anywhere, you don't need a `form` tag at all. — Scott Marcus, Apr 24 '20 at 16:54
@ScottMarcus thanks for the comments. The <% %> is NodeJs. The data in the first table is loaded in from a MySQL database. And, I thought I needed to form tag to submit the data to the JQuery function, is that incorrect? — SD_23, Apr 24 '20 at 17:00
i've added node.js as a tag for your question. The HTML `form` tag is only needed when you are going to submit data to a network resource for processing. You don't really submit form data to a function. You can invoke a function and have that function use the data in the fields. Also, even if you were to use the `form` tag, you wrap an entire set of form fields within one tag, not many. In your use case, it's not needed at all. — Scott Marcus, Apr 24 '20 at 21:23

score 1 · Accepted Answer · answered Apr 24 '20 at 17:20

"i" in your jquery is not accessible in click function.

You can use an attribute in html to set this.

I made a JSFiddle for you : https://jsfiddle.net/sngkxvre/3/

<table class="tables" id="playerSearchTable" >
        <form>
            <tr class="player_search_tr">
                <td class="playerTeamTableName10" key="0" id="player_name_submit" width="250px">td0</td>
                <input type="hidden" id="player_name0" value="name0" />
                <input type="hidden" id="player_pos0" value="pos0" />
                <td  width="90px" style="padding-left: 25px;" >pos0</td>
                <td  class="playerTeamTableName" width="90px" style="padding-left: 25px;">team0</td>
                <td  width="120px" style="padding-left: 25px;">league0</td>
           </tr>
       </form>
       <form>
            <tr class="player_search_tr">
                <td class="playerTeamTableName11" key="1" id="player_name_submit" width="250px">td1</td>
                <input type="hidden" id="player_name1" value="name1" />
                <input type="hidden" id="player_pos1" value="pos1" />
                <td  width="90px" style="padding-left: 25px;" >pos1</td>
                <td  class="playerTeamTableName" width="90px" style="padding-left: 25px;">team1</td>
                <td  width="120px" style="padding-left: 25px;">league1</td>
           </tr>
       </form>
</table>
<table id="playerSearchTable1" style="background-color:blue;">

</table>








$(document).ready(function(){
    ul = document.getElementById("playerSearchTable");
    li = ul.getElementsByTagName('tr');
    for (i = 0; i < li.length; i++) {
        player_name = li[i].getElementsByClassName("playerTeamTableName1"+i);
        $(player_name).click(function(){
            let j = $(this).attr('key');
            var name = $("input[id='player_name"+j+"']").val();
            var pos = $("input[id='player_pos"+j+"']").val();
            player_table_list = document.getElementById("playerSearchTable1");
            var markup = "<tr class=\"player_search_tr\"><td width=\"60px\"></td><td width=\"300px\">" + name + "</td><td width=\"90px\">" + pos + "</td></tr>";
            $('#playerSearchTable1').append(markup);
         });
     }
});

Thank you for the effort in your answer! It was very helpful! — SD_23, Apr 24 '20 at 17:28

JQuery Adding Row to Table, Row is Undefined

1 Answers1