CODEWITHSUNDEEP
javascriptjqueryhtml
Brett J Mason
Brett J Mason

Reputation: 65

Add Row on Button click

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?

Upvotes: 0

Views: 3935

Answers (2)

Gus
Gus

Reputation: 6871

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.

Upvotes: 0

Brent Anderson
Brent Anderson

Reputation: 966

id not name :)

<table name="mytable2"


<table id="mytable2"

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

Upvotes: 2

Related Questions