javascript - 如何使用脚本将页面上已有的选定信息获取到页面的另一部分

Question

我的页面显示了 NFL 球员列表以及他们旁边的一些信息和一个添加按钮。我的目标是在原始表格旁边显示所有已添加的球员。 1 这就是我所拥有的。 2如果按下佩顿·曼宁和贾马尔·查尔斯旁边的添加按钮，这将是我的想法结果。 (无法发布图片)

下面是在表格中显示玩家的代码。

<% int count = 0; 
   ArrayList<String[]> p = new ArrayList<String[]>();
   GetPlayers getplayers = new GetPlayers();
   String[][] result = getplayers.run();
   String[][] myList = new String[100][10];
%>

 <% for(int i = 0; i < result.length; i++)  { %>

<tr>
    <td style="vertical-align: top;"><button onclick="myFunction2(<%=i%>)"id="add<%= i %>">Add</button><br></td>
    <td style="vertical-align: top;"id="Position<%= i %>"><%= result[i][1] %><br></td>
    <td style="vertical-align: top;"id="Player<%= i %>"><%= result[i][3]+" "+result[i][4] %><br></td>
    <td style="vertical-align: top;"id="Team<%= i %>"><%= result[i][7] %><br></td>
    <td style="vertical-align: top;"id="Opponent<%= i %>"><%= result[i][8] %><br></td>
    <td style="vertical-align: top;"id="Projected<%= i %>"><%= result[i][5] %><br></td>
    <td style="vertical-align: top;"id="Salary<%= i %>"><%= result[i][2] %><br></td>
<tr>

<%} %>

Answer 1

哇哦 Java 服务器页面!

添加另一个<table>显示您的选择并为其指定一个 ID(例如“selected-players”)

将 ID 添加到列表行 <tr> (如id='player-listing-<%= i %>')

myFunction2(i)然后应该像这样工作:

myFunction2 = function (i){
  //get selection table
  var table = document.getElementById('selected-players');

  //get the row to be copied over
  var copyRow = document.getElementById('player-listing-'+i).cloneNode(true);

  //change the id attribute on the copied row
  copyRow.setAttribute('id', 'selected-row-'+i);

  //remove the add button on the copy (<td> and <button>)
  copyRow.removeChild(copyRow.firstChild);  
  copyRow.removeChild(copyRow.firstChild);

  //add copied row to new table
  table.appendChild(copyRow);
}

它还可以帮助您习惯 jQuery 库，因为它可以大大简化像这样的 DOM 操作

==========================编辑评论=================== ===========

要从表中检索数据，您需要仔细检查它，并提取所需的数据，然后将其推送到数组中。 下面的函数将执行此操作并返回一个 javascript 数组，其中包含所选表中的所有玩家名称，然后您可以将其传递给 Java 代码

getPlayerNames = function(){
  var selected = document.querySelectorAll("#selected-players > tr > td");
  var playernames = [];
  for(var i=0; i<selected.length; ++i){
     var id = selected[i].getAttribute('id');
     if (id.indexOf('Player')>-1) {
         playernames.push(selected[i].textContent);
     }

  }
  return playernames;    
}