在javascript之后跳过html表中的第一行

Question

如果所有值都填写在文本框中，我的下面的代码会在按钮单击时跳过 html 表的最后一行，但现在我有一种情况，我只想跳过第一行，因为在我的情况下会有标题在第一行并打印除第一行之外的所有数据。

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


        }
    });

Answer 1

也许是这样的？ FIDDLE

我刚刚在您的 if 子句中添加了另一个条件。

之前：

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

之后：

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

或者：

if (index >= 1 && valid) {

Answer 2

试试这个

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

Answer 3

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

在上面的示例中，您可以通过将标题行放入thead 来跳过它。我已经给出了循环遍历 Table Body

的代码

jsFiddle

一些参考，可能对你有帮助。

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

Answer 4

取决于你想怎么做。这是执行 JavaScript 的更简洁的方法。它对第一个和最后一个使用伪元素。你也可以使用<thead> 标签来做标题。这样就无需跳过第一行。

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