跳过最后一个Html行文本框值并在打印时选择

Skip last Html row text box value and select on print

本文关键字：打印 选择 最后一个 Html 文本      更新时间：2023-09-26

我正在尝试创建一个将数据插入Mobile sqlite数据库的查询，比如说，目前我在一个html表中有三行。按下按钮会生成一个查询，它选择文本框的值和选择的值，但问题是在打印时，它应该跳过最后一行的值，就像我的情况一样，这是一个自动递增表，最后一行为空为用户填写数据。

现在

INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ("Mickey1","Mouse1","No Match"),("Mickey2","Mouse2","No Match"),("skip row","skip row","No Match");

预期

INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ("Mickey1","Mouse1","No Match"),("Mickey2","Mouse2","No Match");

演示Jsfidle

JS-

function Get() {
  var html = '';
  var arr = [];
  $('tr').each(function() {
    var inputs = $('input', this);
          var selects = $('select :selected', this);
    arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
  });
  html = 'INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ' + arr.join(',') + ';';
  $('#data').html(html);
}

HTML

<form id="Form" onsubmit="return false;">
    <table>
        <tr>
            <td>First name:
                <input type="text" name="FirstName" value="Mickey1">
            </td>
            <td>Last name:
                <input type="text" name="Lastname" value="Mouse1">
            </td>
                   <td>Last name:
             <select name="select2">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>
            </td>
        </tr>
        <tr>
            <td>First name:
                <input type="text" name="FirstName" value="Mickey2">
            </td>
            <td>Last name:
                <input type="text" name="Lastname" value="Mouse2">
            </td>
                </td>
                   <td>Last name:
             <select name="select2">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>
            </td>
        </tr>
        <tr>
            <td>skip row
                <input type="text" name="FirstName" value="skip row">
            </td>
            <td>skip row
                <input type="text" name="Lastname" value="skip row">
            </td>
                </td>
                   <td>skip row
             <select name="select2">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>
            </td>
        </tr>
    </table>
</form>
<input type="submit" name="Submit" onclick="Get();" />
<div id="data"></div>

如果将index参数添加到each函数中，则可以编辑代码以仅显示特定行。

$('tr').each(function(index, me) {
  if(index < $('tr').length - 1) {
    var inputs = $('input', me);
    var selects = $('select :selected', me);
    arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
  }
});

同样在each函数中，我认为不建议使用this。将第二个参数添加到函数中应该类似于单个行的this(因为我已经使用了me(。

这是你的Fiddle的分叉版本-https://jsfiddle.net/szkp0Lwq/1/

编辑

根据您在下面的评论-

如果你首先想验证你的输入，你可以做一些类似的事情

var valid = true;
$('tr').each(function(index, me) {
  if(index < $('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 + '","' + $(selects[0]).val() + '")');
  }
});
if(valid)
  ..... submit query
else 
  alert("Form isn't valid!");

Fiddle-https://jsfiddle.net/o4b1rLns/2/

您可以在构建数组时跳过该行，或者只添加没有"跳过行"值的行，如下所示：

$('tr').each(function() {
var inputs = $('input', this);
      var selects = $('select :selected', this);
  if (inputs[0].value != "skip row") {
      arr.push('("' + inputs[0].value + '","' + inputs[1].value + '","' + selects[0].text + '")');
  }  
});
相关文章：