Question

以下是原始表的内容。

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

<tr id='player-listing-<%=i %>'>
    <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>

这是myFunction2，它将相应的行复制到另一个表

function myFunction2(i){
    var table = document.getElementById('selected-players')
    var copyRow = document.getElementById('player-listing-'+i).cloneNode(true);
    copyRow.setAttribute('id', 'selected-row-'+i);
    copyRow.removeChild(copyRow.firstChild);
    copyRow.removeChild(copyRow.firstChild);
    table.appendChild(copyRow);
    document.getElementById("add"+i).disabled = true;
}

现在，myFunction2将原始表中的相应行复制到另一个表，并从副本中删除添加按钮。我想在行的第一列中放置一个删除按钮，并在删除按钮上单击运行一个函数。

Answer 1

不是删除第一个单元格，而是使用删除按钮（如

）更新其内容

＆＃13;

function myFunction2(i) {
  var table = document.getElementById('selected-players')
  var copyRow = document.getElementById('player-listing-' + i).cloneNode(true);
  copyRow.setAttribute('id', 'selected-row-' + i);
  copyRow.cells[0].innerHTML = '<button onclick="removeRow(this, ' + i + ')">Remove</button>';
  table.appendChild(copyRow);
  document.getElementById("add" + i).disabled = true;
}

function removeRow(btn, idx) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
  document.getElementById("add" + idx).disabled = false;
}

＆＃13;

<table>
    <tbody><tr id="player-listing-1">
        <td style="vertical-align: top;"><button onclick="myFunction2(1)" id="add1">Add</button><br></td>
        <td style="vertical-align: top;" id="Position1">Position1<br></td>
        <td style="vertical-align: top;" id="Player1">Player1<br></td>
        <td style="vertical-align: top;" id="Team1">Team1<br></td>
        <td style="vertical-align: top;" id="Opponent1">Opponent1<br></td>
        <td style="vertical-align: top;" id="Projected1">Projected1<br></td>
        <td style="vertical-align: top;" id="Salary1">Salary1<br></td>
    </tr>
<tr id="player-listing-2">
        <td style="vertical-align: top;"><button onclick="myFunction2(2)" id="add2">Add</button><br></td>
        <td style="vertical-align: top;" id="Position2">Position2</td>
        <td style="vertical-align: top;" id="Player2">Player2</td>
        <td style="vertical-align: top;" id="Team2">Team2</td>
        <td style="vertical-align: top;" id="Opponent2">Opponent2</td>
        <td style="vertical-align: top;" id="Projected2">Projected2</td>
        <td style="vertical-align: top;" id="Salary2">Salary2</td>
    </tr><tr id="player-listing-3">
        <td style="vertical-align: top;"><button onclick="myFunction2(3)" id="add3">Add</button><br></td>
        <td style="vertical-align: top;" id="Position3">Position3</td>
        <td style="vertical-align: top;" id="Player3">Player3</td>
        <td style="vertical-align: top;" id="Team3">Team3</td>
        <td style="vertical-align: top;" id="Opponent3">Opponent3</td>
        <td style="vertical-align: top;" id="Projected3">Projected3</td>
        <td style="vertical-align: top;" id="Salary3">Salary3</td>
    </tr><tr id="player-listing-4">
        <td style="vertical-align: top;"><button onclick="myFunction2(4)" id="add4">Add</button><br></td>
        <td style="vertical-align: top;" id="Position4">Position4</td>
        <td style="vertical-align: top;" id="Player4">Player4</td>
        <td style="vertical-align: top;" id="Team4">Team4</td>
        <td style="vertical-align: top;" id="Opponent4">Opponent4</td>
        <td style="vertical-align: top;" id="Projected4">Projected4</td>
        <td style="vertical-align: top;" id="Salary4">Salary4</td>
    </tr><tr id="player-listing-5">
        <td style="vertical-align: top;"><button onclick="myFunction2(5)" id="add5">Add</button><br></td>
        <td style="vertical-align: top;" id="Position5">Position5</td>
        <td style="vertical-align: top;" id="Player5">Player5</td>
        <td style="vertical-align: top;" id="Team5">Team5</td>
        <td style="vertical-align: top;" id="Opponent5">Opponent5</td>
        <td style="vertical-align: top;" id="Projected5">Projected5</td>
        <td style="vertical-align: top;" id="Salary5">Salary5</td>
    </tr><tr id="player-listing-6">
        <td style="vertical-align: top;"><button onclick="myFunction2(6)" id="add6">Add</button><br></td>
        <td style="vertical-align: top;" id="Position6">Position6</td>
        <td style="vertical-align: top;" id="Player6">Player6</td>
        <td style="vertical-align: top;" id="Team6">Team6</td>
        <td style="vertical-align: top;" id="Opponent6">Opponent6</td>
        <td style="vertical-align: top;" id="Projected6">Projected6</td>
        <td style="vertical-align: top;" id="Salary6">Salary6</td>
    </tr><tr id="player-listing-7">
        <td style="vertical-align: top;"><button onclick="myFunction2(7)" id="add7">Add</button><br></td>
        <td style="vertical-align: top;" id="Position7">Position7</td>
        <td style="vertical-align: top;" id="Player7">Player7</td>
        <td style="vertical-align: top;" id="Team7">Team7</td>
        <td style="vertical-align: top;" id="Opponent7">Opponent7</td>
        <td style="vertical-align: top;" id="Projected7">Projected7</td>
        <td style="vertical-align: top;" id="Salary7">Salary7</td>
    </tr><tr id="player-listing-8">
        <td style="vertical-align: top;"><button onclick="myFunction2(8)" id="add8">Add</button><br></td>
        <td style="vertical-align: top;" id="Position8">Position8</td>
        <td style="vertical-align: top;" id="Player8">Player8</td>
        <td style="vertical-align: top;" id="Team8">Team8</td>
        <td style="vertical-align: top;" id="Opponent8">Opponent8</td>
        <td style="vertical-align: top;" id="Projected8">Projected8</td>
        <td style="vertical-align: top;" id="Salary8">Salary8</td>
    </tr><tr id="player-listing-9">
        <td style="vertical-align: top;"><button onclick="myFunction2(9)" id="add9">Add</button><br></td>
        <td style="vertical-align: top;" id="Position9">Position9</td>
        <td style="vertical-align: top;" id="Player9">Player9</td>
        <td style="vertical-align: top;" id="Team9">Team9</td>
        <td style="vertical-align: top;" id="Opponent9">Opponent9</td>
        <td style="vertical-align: top;" id="Projected9">Projected9</td>
        <td style="vertical-align: top;" id="Salary9">Salary9</td>
    </tr><tr id="player-listing-10">
        <td style="vertical-align: top;"><button onclick="myFunction2(10)" id="add10">Add</button><br></td>
        <td style="vertical-align: top;" id="Position10">Position10</td>
        <td style="vertical-align: top;" id="Player10">Player10</td>
        <td style="vertical-align: top;" id="Team10">Team10</td>
        <td style="vertical-align: top;" id="Opponent10">Opponent10</td>
        <td style="vertical-align: top;" id="Projected10">Projected10</td>
        <td style="vertical-align: top;" id="Salary10">Salary10</td>
    </tr>
    </tbody>
    </table>

<table id="selected-players"></table>

＆＃13;

注意：克隆节点后，您的标记将无效，因为会有多个元素包含Position1

等ID

Answer 2

我不确定这会有效，但我认为它会：

function myFunction2(i) {
  var table = document.getElementById('selected-players')
  var copyRow = document.getElementById('player-listing-' + i).cloneNode(true);
  copyRow.setAttribute('id', 'selected-row-' + i);
  copyRow.cells[0].innerHTML = '<button onclick="removeRow(this, ' + i + ')">Remove</button>';
  table.appendChild(copyRow);
  document.getElementById("add" + i).disabled = true;
}

function removeRow(btn, idx) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
  document.getElementById('selected-players');
  document.getElementById("add" + idx).disabled = false;
}

DEMO

如何在我要复制到另一个表的行的开头放置一个删除按钮

2 个答案: