Skip First Row in html table after javascript

Question

My below code skips the last row of the html table on button click if all the values are filled in the text box's but now i have a situation where i wan to skip the first row only as in my case there will be heading on first row and print all data expect first row.

With Heading demo doent work as there is text on first row

Demo With out heading skips last row working HTML

<table border="1" id="Positions_names">
    <tbody>

        <tr>
            <td align="center">text heading
            </td>
            <td>
               text heading
            </td>
            <td style="display:none;">
                text heading
            </td>
            <td style="display:none;">
               text heading
            </td>
            <td style="display:none;">
              text heading
            </td>
            <td style="display:none;">
              text heading
            </td>
            <td style="display:none;">
             text heading
            </td>
        </tr>
        <tr>
            <td align="center">b
                <input type="hidden" value="b">
            </td>
            <td>
                <input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_id" value="767F1G">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_title" value="21">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_date" value="2015-09-21">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_start_time" value="02:03">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_end_time" value="15:04">
            </td>
        </tr>
        <tr>
            <td align="center">c
                <input type="hidden" value="c">
            </td>
            <td>
                <input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_id" value="767F1G">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_title" value="21">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_date" value="2015-09-21">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_start_time" value="02:03">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_end_time" value="15:04">
            </td>
        </tr>
        <tr>
            <td align="center">d
                <input type="hidden" value="d">
            </td>
            <td>
                <input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_id" value="767F1G">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_title" value="21">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_date" value="2015-09-21">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_start_time" value="02:03">
            </td>
            <td style="display:none;">
                <input type="hidden" class="election_end_time" value="15:04">
            </td>
        </tr>
    </tbody>
</table>

                <input type="submit" onclick="save_election_req_details();" id="submit_positions">

js:

$('#submit_positions').click(function () {

        var x = document.getElementById("Positions_names").rows.length;
        if(x=="1")
        {
            alert("Select Some Details to Contunue");

        }

        else {

            var html = '';
            var arr = [];
            var valid = true;
            $('#Positions_names tr').each(function (index, me) {
                if (index < $('#Positions_names tr').length - 1 && valid) {
                    var inputs = $('input', me);
                    inputs.each(function (index, me) {
                        if ($(me).val().length == 0) valid = false;
                    });
                    var selects = $('select', me);
                    selects.each(function (index, me) {
                        if ($(me)[0].selectedIndex == 0) valid = false;
                    });
                    if (valid){

arr.push('("' + inputs[0].value + '","' + inputs[1].value +'")');


                    } 
                }
            });
            if (valid) {

                html = 'INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ' + arr.join(',') +  ';';
                                                alert(html);
            } else

            {
                alert("Fill the Price or Select the Created Product");
            }


        }
    });

I'm not sure I understand your problem. You want to have the query skip the first table row, if all other rows are filled in? — Chris
– Chris, Commented Sep 21, 2015 at 11:32
@Chris yes you are right my above code skips the last row am not sure how to skip the first row my second demo works fine but it skips the last row i want to skip first row thats it — Shaik
– Shaik, Commented Sep 21, 2015 at 11:34

Chris · Accepted Answer · 2015-09-21 11:46:00Z

2

Maybe like this? FIDDLE

I just added another condition in your if-clause.

Before:

if (index < $('#Positions_names tr').length - 1 && valid) {

After:

if (index < $('#Positions_names tr').length && valid && index >= 1) {

Alternatively:

if (index >= 1 && valid) {

answered Sep 21, 2015 at 11:46

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

1 Comment

Shaik Over a year ago

Hi Chris Need your help Can i Have some time of yours?? Regarding JS

Hardik Bharadava · Accepted Answer · 2015-09-21 11:51:06Z

2

$('tbody tr').each(function(){
        $(this).find('td:eq(5)').text('$145');
});

In above example you can skip header row by putting it into thead. I have given code to loop through the Table Body

jsFiddle

Some Refrences, may Help you.

answered Sep 21, 2015 at 11:51

Hardik Bharadava

4721 gold badge10 silver badges22 bronze badges

Comments

Muhammed Shevil KP · Accepted Answer · 2015-09-21 11:42:53Z

1

try this

 $('#Positions_names tr:gt(0)').each(function (index, me) {

answered Sep 21, 2015 at 11:42

Muhammed Shevil KP

1,3961 gold badge16 silver badges22 bronze badges

1 Comment

Shaik Over a year ago

ma be iam wrong according to my analies the problem was on this row if (index < $('#Positions_names tr').length - 1 && valid) {

Roger · Accepted Answer · 2015-09-21 12:09:23Z

Depending on how you want to do things. Here is a more succinct way of doing your JavaScript. It uses pseudo elements for first and last. Also you can use <thead> tags to do headers. This eliminates the need to skip the first row.

$('form').submit(function(e) {
  //prevents the form from submitting
  e.preventDefault();
  //pushes the strings into arrays to be joined by commas later
  var chunck = [];
  //foreach tr in tbody
  $('tbody tr')
    //do not select first or last child tr
    .not(':last-child,:first-child')
    //find the inputs an foreach
    .find('input').each(function() {
      //get the name and the value
      var name = $(this).attr("name");
      var value = $(this).val();
      //if the value is not empty then push it to the string
      if (value.length > 0) {
        chunck.push("('" + name + "','" + value + "')");
      }
    })
    //chunck.join() puts commas between array elements
  var string = 'INSERT INTO (name,value) VALUES ' + chunck.join();
  alert(string);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table border="1">
    <thead>
      <tr>
        <th>Head</th>
        <th>Head</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>a</td>
        <td>
          <input name='a' />
        </td>
      </tr>
      <tr>
        <td>b</td>
        <td>
          <input name='b' />
        </td>
      </tr>
      <tr>
        <td>c</td>
        <td>
          <input name='c' />
        </td>
      </tr>
      <tr>
        <td>d</td>
        <td>
          <input name='d' />
        </td>
      </tr>
    </tbody>
  </table>
  <input type="submit" />
</form>

Collectives™ on Stack Overflow

Skip First Row in html table after javascript

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related