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

时间:2015-09-21 11:15:46

标签: javascript jquery html

如果所有值都填写在文本框中,我的下面的代码会跳过按钮点击的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");
            }


        }
    });

4 个答案:

答案 0 :(得分:2)

也许是这样的? FIDDLE

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

在:

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

后:

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

可替换地:

if (index >= 1 && valid) {

答案 1 :(得分:1)

试试这个

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

答案 2 :(得分:1)

取决于您想要做的事情。这是一种更简洁的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>

答案 3 :(得分:0)

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

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

的代码

jsFiddle

一些参考,可以帮助你。

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