CODEWITHSUNDEEP
jqueryhtml
NewUser
NewUser

Reputation: 13333

jquery add a row after the first row

I have my html markup like this

<table class="left-column-form" id="ref-table">
                    <tr>
                        <th style="width:20%">Shipping Service Name</th>
                    <th style="width:20%">From Price</th>
                        <th style="width:20%">To Price</th>
                        <th style="width:20%">Price</th>
                        <th style="width:20%">Additional Price</th>
                    </tr>
          <tr id="row">
                        <td style="width:20%;">
                        <select name="">
                            <option value="" selected>--Select-- </option>
                            <option value="service-one">Service One </option>
                            <option value="service-two">Service Two </option>
                            <option value="service-three">Service Three </option>
                        </select>
                        </td>
                        <td style="width:20%;">
                            <input type="text" name="from-price"/>
                        </td>
                        <td style="width:20%;">
                            <input type="text" name="to-price"/>
                        </td>
                        <td style="width:20%;">
                            <input type="text" name="price"/>
                        </td>
                        <td style="width:20%;">
                            <input type="text" name="additional-price"/>
                        </td>
                    </tr>
                </table>

under that I have one button like this 

<input type="submit" id="add-services" value="Add Service" />

I want that when someone will click on the button it will add another row like

<tr id="row">
                    <td style="width:20%;">
                    <select name="">
                        <option value="" selected>--Select-- </option>
                        <option value="service-one">Service One </option>
                        <option value="service-two">Service Two </option>
                        <option value="service-three">Service Three </option>
                    </select>
                    </td>
                    <td style="width:20%;">
                        <input type="text" name="from-price"/>
                    </td>
                    <td style="width:20%;">
                        <input type="text" name="to-price"/>
                    </td>
                    <td style="width:20%;">
                        <input type="text" name="price"/>
                    </td>
                    <td style="width:20%;">
                        <input type="text" name="additional-price"/>
                    </td>
                </tr>

just after the first row. So can someone tell me how to do this in a good coding manner?

Upvotes: 0

Views: 1720

Answers (4)

Sajad Deyargaroo
Sajad Deyargaroo

Reputation: 1149

It seems the desired behavior is to add the row after first row and not after the header row and below is the code (tested) that does it.

$(function () {
    var rowNo = 0;

    $("#add-services").click(function(e) {
        e.preventDefault();
        var rowHtml = '<tr id="row'+(rowNo++)+'"><td>'+$('select[name="service-name"]').val()+'</td><td>'+$('input[name="from-price"]').val()+'</td><td>'+$('input[name="to-price"]').val()+'</td><td>'+$('input[name="price"]').val()+'</td><td>'+$('input[name="additional-price"]').val()+'</td></tr>';
        $('#ref-table > tbody > tr').eq(1).after(rowHtml);
    });
});

Also, it seems that you missed to add the name to the select box. Please replace

<select name="">

with

<select name="service-name">

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

Change your ID's on rows to class since ID's must be unique:

On page load can copy a row and store it:

var $row=$('tr.row:first').clone();    
/* add a copy back in table*/
$('#add-services').click(function(){
  $('tr:first').after( $row.clone());
});

If need to clear input values of iniital clone add:

$row.find('input').val('')

Upvotes: 1

ScalaWilliam
ScalaWilliam

Reputation: 741

Two things:

Semantics - use <tbody> and <thead>

You can write your table like this: 

<table id="ref-table">
  <thead><tr><td colspan="5"><select name="..">...</select></td></tr></thead>
  <tbody><tr><td><input type="text" name="from-price"/></td>...</tr></tbody>
</table>

Using .clone():

Once you've done that, you can easily make use of jQuery's clone call.

You can always do something like this:

function copyMe() {
  return $(this).clone().insertAfter(this).first();
}

var newRow = $('#ref-table tbody tr:first-child').map(copyMe)[0]

Then you can use newRow however you wish to, replace the cloned input's values with new/default ones. You can customise first-child into last-child (think of user experience).

The big benefit is that you need not have to embed any HTML into your JavaScript. You can even hide the first row with CSS and use it as a template and nothing more. You might want to also look at insertBefore.

Upvotes: 1

Purus
Purus

Reputation: 5799

You could try this:

$("#myButton").click(function(){
    $("#ref-table tr:first").after("<tr><td class='myTd'>content2</td><td  class='myTd'>content2</td></tr>");
});

Fiddle: http://jsfiddle.net/T88k7/4/

Upvotes: 0

Related Questions