CODEWITHSUNDEEP
jquery
user819774
user819774

Reputation: 1514

insert a new row in jquery but it didn't show

I want to add a new row if the cell has specific class. The new row didn't show. I know I get all cell I wanted. I tried to use outerHTML to confirm I get the row, but it is undefined. Would someone help me to solve the problem. Thanks in advance.

There is my code:

 <script type="text/javascript">
    function testForm() {

            $('.tAdd').each(function() {                   
                var $clone = $('#Warning').data("arr", [1]);
                $clone.toggleClass('hide', false);
                            //testing to show the new row after this cell
                $(this).css("background-color", "blue");                   
                //alert($(this).parent().outerHTML);                     
                $clone.insertAfter($(this).parent());
            });


        }

</script>

there is my html

<body onload="testForm()">
<form id="form1" runat="server" method="post" >
<div>
  <table cellpadding="0" cellspacing="0"  class="tBorder"  >        
      <tr>
        <td  class="tdWith">January</td>
        <td class="tdWith tAdd">$100</td>
      </tr>
      <tr>
        <td class="tdWith">February</td>
        <td class="tdWith">$80</td>
      </tr>
       <tr>
        <td  class="tdWith">March</td>
        <td class="tdWith tAdd">$200</td>
      </tr>
</table>
     <asp:Panel ID="Warning" runat="server" Visible="true" CssClass="hide">                  <span id="lblWarning" class="fntcolor01">                             test warning
     </span> 
</asp:Panel>
   </div>
   </form>
</body>

Upvotes: 1

Views: 47

Answers (2)

beauXjames
beauXjames

Reputation: 8428

If you add something to the table, then it needs to be something the table can display. http://jsfiddle.net/cg3jrhs3/

In addition, the comments above about your 'warning' panel are correct...if you want to use something as more of a template to display, then you need to provide something a little more formatted for the occasion.

AAAANND, if you just select $('.tAdd') then you'll get every row with that class attached...as you'll see in the example.

$('<tr><td>woops</td><td>i farted</td></tr>').insertAfter($(this).parent());

excuse the crude example...

Upvotes: 0

Barmar
Barmar

Reputation: 782148

If you want to clone an element, you need to call .clone():

var $clone = $('#Warning').clone().data("arr", [1]).removeAttr('id');

I remove the id attribute to prevent duplicate IDs in the DOM.

Your code is just moving the #Warning panel from place to place each time through the loop, without making a copy of it.

Upvotes: 1

Related Questions