Question

我的页面显示了NFL玩家列表以及旁边的一些信息和一个添加按钮。我的目标是显示所有已添加到原始表旁边的玩家。 1 这就是我所拥有的。 2如果在Peyton Manning和Jamaal Charles旁边按下添加按钮，这将是我的想法结果。（不能发布图片）

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

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

显示实现所需内容的方法的简单示例。我希望这会有所帮助

function myfunction(buttonElement){
 var htmlToAdd = buttonElement.parentNode.parentNode.innerHTML;
  document.getElementById('table2').innerHTML += '<tr>'+htmlToAdd+'</tr>';
}

#table2 button{
 display:none;
}
table{
float:left;
}

<table>
    <tr>
      <td>
        <button onclick="myfunction(this)">this</button>
        </td>
      <td>Name1
        </td>
      <td>Age1
        </td>
      <td>Type1
        </td>
      </tr>
    <tr>
      <td>
        <button onclick="myfunction(this)">this</button>
        </td>
      <td>Name2
        </td>
      <td>Age2
        </td>
      <td>Type2
        </td>
      </tr>
    <tr>
      <td>
        <button onclick="myfunction(this)">this</button>
        </td>
      <td>Name3
        </td>
      <td>Age3
        </td>
      <td>Type3
        </td>
      </tr>
  </table>

<table id="table2">
  </table>

Answer 2

Wooo Java Server Pages！

添加另一个<table>以显示您的选择并为其指定一个ID（例如＆＃39;所选玩家＆＃39;）

在您的商家信息表行<tr>（例如id='player-listing-<%= i %>'）

中添加ID 然后

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

如何使用脚本将页面上已有的选择信息提供给页面的另一部分

2 个答案: