Add Row on Button click

Question

Trying to add a row of this table when you click the input "plus".

My Html

<table name="mytable2" width="100px"  border="0" cellspacing="0" cellpadding="0" style="padding-top:5px">
    <tr class="st" name="st">
    <td width="80px" style="text-align:center; padding-top:3px;">
    <input type="Text" id="newst" name="newst" maxlength="25" style="width:80px; font-family:Tahoma; font-size:11px;"></td>
    <td width="20px">
    <input type="submit" name="plus" id="plus" value="+" style="width:20px; text-align:center;"></td>  
    </tr>
</table>

What I'm using:

<script type="text/javascript">
$(document).ready(function() {
    $("#plus").click(function() {
$('#mytable2 tbody>tr:last').clone(true).insertAfter('#mytable2 tbody>tr:last');
$('#mytable2 tbody>tr:last #st').val('');
    $('#mytable2 tbody>tr:last #newst').val('');
            $('#mytable2 tbody>tr:last #plus').val('+');
return false;
    });
});

Could anyone help?

I didn't run your code; what happens?

j08691
– j08691

2012-01-26 22:35:32 +00:00
Commented Jan 26, 2012 at 22:35 — j08691
– j08691, Commented Jan 26, 2012 at 22:35

Brent Anderson · Accepted Answer · 2012-01-26 22:36:54Z

2

id not name :)

<table name="mytable2"


<table id="mytable2"

http://jsfiddle.net/brentmn/whgy6/

answered Jan 26, 2012 at 22:36

Brent Anderson

9664 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:27:29Z

I think perhaps you've got tied up in trying to do it in few lines of code, and using frameworks... The following will do what you want, and doesn't require any libraries. If you are worried about the bytes transfered, write clear code and minify it with a minifier such as

http://developer.yahoo.com/yui/compressor/

Here's what worked for me, and it's readable to boot :)

<html>
<head>
<title>foo</title>
<script type="text/javascript">
function insertAfter( referenceNode, newNode ) {
    referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
}

function cloneRow(e) {

  // first find our row
  var elem = e;
  while ( elem.tagName != 'TR' ) {
    elem = elem.parentNode;
  }

  var newElem = elem.cloneNode(true);
  insertAfter(elem, newElem);
}
// ]]>
</script>
</head>
<body>
<table name="mytable2" width="100px"  border="0" cellspacing="0" cellpadding="0" style="padding-top:5px">
    <tr class="st" name="st">
    <td width="80px" style="text-align:center; padding-top:3px;">
    <input type="Text" id="newst" name="newst" maxlength="25" style="width:80px; font-family:Tahoma; font-size:11px;"></td>
    <td width="20px">
    <input type="submit" name="plus" id="plus" value="+" style="width:20px; text-align:center;" onclick="cloneRow(this)"></td>  
    </tr>
</table>
</body>
</html>

Credit where credit is due, you can see that I used the insert trick from another answer for part of this answer...

.insertAfter or .append to an Element Id with Javascript. it's a script tag so it can't be with $

Note that this relies on passing in "this" in the html. If you attach it with jQuery or something else, you'll need to look at e.target etc.

Collectives™ on Stack Overflow

Add Row on Button click

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related