CODEWITHSUNDEEP
javascriptjquery
val
val

Reputation: 749

jQuery script not running properly

I'am making a small personal app for creating html tables with jquery. I have this script (which i borrowed from somewhere around here and tweaked it a bit) that would, at the click of a button, add a new column at the end of my table. 

function addJSONKey(){
var first = true;

$('#jsonTable').find('tr').each(function(){ 
    $(this).find('th').eq(-1).after(
        '<th contentEditable>New Key</th>'
    );
        if(first === true){
            first = false;      
            // the function does not execute this statement 
            // even though the debugger breaks here. 
            $(this).find('td').eq(-1).after(
                '<td>Frist</td>'
            ); 
        } else {                
            $(this).find('td').eq(-1).after(
                '<td contentEditable>Not First</td>'
            );
        }
}); 
}

What i'd like the script to do is, for the first row to be different than the others, but if i run the script it gives back Not First rows everywhere.

Upvotes: 2

Views: 70

Answers (3)

Gavriel
Gavriel

Reputation: 19247

In your code you counted the 1st row that was the header as first, you want to add to the 1st non-header row, that is the 2nd row, that is index 1, because it's 0 based :)

function addJSONKey(){
$('#jsonTable').find('tr').each(function(row){ 
    $(this).find('th').eq(-1).after('<th contentEditable>New Key</th>');
        if(row == 1){
            // the function does not execute this statement 
            // even though the debugger breaks here. 
            $(this).find('td').eq(-1).after('<td>Frist</td>'); 
        } else {                
            $(this).find('td').eq(-1).after(
                '<td contentEditable>Not First</td>'
            );
        }
}); 
}
//addJSONKey();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="jsonTable">
  <tr><th>a</th><th>b</th></tr>
  <tr><td>10</td><td>11</td></tr>
  <tr><td>20</td><td>21</td></tr>
</table>
<button onclick="addJSONKey()">go</button>

Upvotes: 0

dfsq
dfsq

Reputation: 193301

You overcomplicated it a little. You can distinguish rows by their indexes and append new th or td accordingly:

function addJSONKey() {
    $('#jsonTable').find('tr').each(function(i) {
    	// Header row
        if (i === 0) {
            $(this).find('th').eq(-1).after('<th contentEditable>New Key</th>');	
        }
        // First data row
        else if (i === 1) {
            $(this).append('<td>Frist</td>');
        } 
        // Not header and not the first row 
        else {
            $(this).append('<td contentEditable>Not First</td>');
        }
    });
}

$('button').click(addJSONKey);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add</button>

<table id="jsonTable">
    <tr>
        <th>One</th>
    </tr>
    <tr>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
    </tr>
</table>

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68443

replace your method with

function addJSONKey()
{

  $( '#jsonTable' ).find( 'tr' ).each(function(){ 
      $(this).find('th').eq(-1).after(
        '<th contentEditable>New Key</th>'
      );
  });
  $( '#jsonTable' ).find( 'tr' ).each(function(){ 
       if($(this).find('td').length == 0 )
       {
            $(this).append('<td>Frist</td>'); 
       } 
       else 
        {                
            $(this).append('<td contentEditable>Not First</td>');
        }
   }); 
}

basically your boolean first will only be true for first column of first row.

Upvotes: 0

Related Questions