在JavaScript之后跳过HTML表格中的第一行

Question

我的以下代码在按钮点击时跳过HTML表格的最后一行，如果文本框中的所有值都已填写，但现在我有一个情况，我只想跳过第一行，因为在我的情况下，第一行将有标题，并打印除第一行外的所有数据。 有标题演示不起作用，因为第一行有文本 没有标题的演示跳过最后一行工作 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");
            }


        }
    });

- Shaik

---

我不确定我理解你的问题。您希望查询跳过第一行表格，如果所有其他行都填满了？ - Chris

@Chris，是的，你说得对，我的上面的代码跳过了最后一行，我不确定如何跳过第一行。我的第二个演示很好，但它跳过了最后一行，我只想跳过第一行。 - Shaik

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

- Chris

---

嗨Chris，需要你的帮助。可以占用一些你的时间吗？关于JS。 - Shaik

Answer 2

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

在上面的例子中，您可以通过将标题行放入thead中来跳过它。我已经提供了循环遍历表格主体的代码。

jsFiddle

一些参考资料，可能会对您有所帮助。

1. each()
2. find()
3. eq()选择器
4. text()

- Hardik Bharadava

Answer 3

根据您的需求，以下是更简洁的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>

- Roger

Answer 4

尝试一下这个。

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

- Muhammed Shevil KP

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Shaik