0

我对 HTML/JQuery 比较陌生。我目前正在尝试使用 onclick 功能将一行从一个表添加到另一个表。如果单击，这是包含我要添加的行的表：

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

这是我的功能：

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

但是，当我在插入的行上方运行代码时，每个单元格都包含值“未定义”。我在这里想念什么？

4

1 回答 1

1

在单击功能中无法访问 jquery 中的“i”。

您可以使用 html 中的属性来设置它。

我为你做了一个 JSFiddle：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);
         });
     }
});
于 2020-04-24T17:20:02.950 回答