CODEWITHSUNDEEP
javascriptjqueryhtml
Shaik
Shaik

Reputation: 930

Skip First Row in html table after javascript

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");
            }


        }
    });

Upvotes: 3

Views: 8050

Answers (4)

Roger
Roger

Reputation: 3256

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>

Upvotes: 1

Hardik Bharadava
Hardik Bharadava

Reputation: 472

$('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.

  1. each()
  2. find()
  3. :eq() Selector
  4. text()

Upvotes: 2

Chris
Chris

Reputation: 59501

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) {

Upvotes: 2

Muhammed Shevil KP
Muhammed Shevil KP

Reputation: 1396

try this

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

Upvotes: 1

Related Questions