CODEWITHSUNDEEP
javascriptjqueryhtml
Mike
Mike

Reputation: 47

Jquery - copy a row from one table to another

I'm brand new to jquery and javascript and I'm trying to write a simple app that will, when I press a button, copy a row from one table to another and then delete the row from the first table. I have a DeleteRow function that works just fine, but I can't get my "DraftPlayer" function to copy the row. I've tried quite a few of the solutions I've found on the web, but I can't get the syntax just right. You'll see only the second row in the table has the DraftPlayer button as I work this out.

Here are the code snippets I think are critical:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
<div>&nbsp;</div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
  <tr>
    <td width="36"> Rank </td>
    <td width="141"> Player Name </td>
    <td width="52">Position </td>
    <td width="38">Team </td>
    <td width="69"> Bye Week </td>
    <td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Antonio Brown</td>
    <td>WR</td>
    <td>PIT</td>
    <td>8</td>
    <td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
    <td width="103">&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Julio Jones</td>
    <td>WR</td>
    <td>ATL</td>
    <td>11</td>
    <td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
    <td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
  </tr>

<table id="drafted">
<table border="1">
  <tr>
    <td width="36"> Rank </td>
    <td width="141"> Player Name </td>
    <td width="52">Position </td>
    <td width="38">Team </td>
    <td width="69"> Bye Week </td>
  </tr>
  </table>


<script>
    function DeleteRow(o) {
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }

    function DraftPlayer(o) {
     var p=o.parentNode.parentNode;

    copyTable = $('#drafted tbody');
    cloneRow = p.clone();
    copyTable.append(cloneRow);

    p.parentNode.removeChild(p);     

    }
</script>
</body>
</html>

Thanks for any suggestions!

Upvotes: 1

Views: 2702

Answers (3)

Shambhu Kumar
Shambhu Kumar

Reputation: 26

You need to convert the DOM Element to jquery object in order to use the clone() function. The modified DraftPlayer() function is:

function DraftPlayer(o) {
 var p=o.parentNode.parentNode;

copyTable = $('#drafted tbody');
cloneRow = $(p).clone();
copyTable.append(cloneRow);

p.parentNode.removeChild(p);     

}

Suggestions:
There are some problem with your HTML also
Modify the table tag.

<table id="your_id" border="1">
       <tbody>
         -----------
         -----------
      </tbody>
</table>

Upvotes: 0

Amar Singh
Amar Singh

Reputation: 5622

    function DeleteRow(o) {
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }

    function DraftPlayer(o) {
     var p=o.parentNode.parentNode;

    copyTable = $('#drafted tbody');
    cloneRow = p.innerHTML;

//alert(cloneRow )
    copyTable.append("<tr>"+cloneRow+"</tr>");

    p.parentNode.removeChild(p);     

    }
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
<div>&nbsp;</div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
  <tr>
    <td width="36"> Rank </td>
    <td width="141"> Player Name </td>
    <td width="52">Position </td>
    <td width="38">Team </td>
    <td width="69"> Bye Week </td>
    <td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Antonio Brown</td>
    <td>WR</td>
    <td>PIT</td>
    <td>8</td>
    <td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
    <td width="103">&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Julio Jones</td>
    <td>WR</td>
    <td>ATL</td>
    <td>11</td>
    <td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
    <td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
  </tr>


<table id="drafted" border="1">
  <tr>
    <td width="36"> Rank </td>
    <td width="141"> Player Name </td>
    <td width="52">Position </td>
    <td width="38">Team </td>
    <td width="69"> Bye Week </td>
  </tr>
  
</table>


</body>
</html>

A lot of mistakes in your code. Go through my code ,I edited it, Works Fine

Upvotes: 0

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14604

You are selecting $('#drafted tbody'); which is not present in DOM at all so you will get nothing. You need to add tbody to your table or you need to change the selector.

<table id="drafted">
 <tbody>
   <tr>
    <th width="36"> Rank </th>
    <th width="141"> Player Name </th>
    <th width="52">Position </th>
    <th width="38">Team </th>
    <th width="69"> Bye Week </th>
   </tr>
  </tbody>
</table>

function DraftPlayer(o) {
        var p = $(o).closest('tr');
        copyTable = $('#drafted tbody');
        cloneRow = p.clone();
        copyTable.append(cloneRow)
        p.remove();

    }

Upvotes: 1

Related Questions