Question

我找到了一种在这里使用jQuery获取2个数字的和/子的方法

$(document).ready(function() {
    //this calculates values automatically 
    sum();
    $("#num1, #num2").on("keydown keyup", function() {
        sum();
    });
});

function sum() {
            var num1 = document.getElementById('num1').value;
            var num2 = document.getElementById('num2').value;
            var result = parseInt(num1) + parseInt(num2);
            var result1 = parseInt(num2) - parseInt(num1);
            if (!isNaN(result)) {
                document.getElementById('sum').value = result;
                document.getElementById('subt').value = result1;
            }
        }

https://jsfiddle.net/javedfiddle/s4j7vm37/

但是，我想要

<tr><td>Sum:</td><td><input type="text" name="sum" id="sum" readonly /></td></tr>

输入为空时隐藏

。

如何用css或jQuery做到这一点？

Answer 1

试试这个：

 if (!isNaN(result)) {
     document.getElementById('sum').style.display = 'block';
     document.getElementById('subt').style.display = 'block';
     document.getElementById('sum').value = result;
     document.getElementById('subt').value = result1;
}else{
     document.getElementById('sum').style.display = 'none';
     document.getElementById('subt').style.display = 'none';
}

使用jQuery：

if (!isNaN(result)) {
     $('#sum').show();
     $('#subt').show();
     $('#sum').val(result);
     $('#sum').val(result1);;
}else{
     $('#sum').hide();
     $('#subt').hide();
}

或者，如果您希望整行消失而不仅仅是结果框，您可以在<tr>中添加一个ID，然后隐藏并按照您的意愿显示它们。

<tr id="sumtr">  
<tr id="subttr">

您可以使用$("#sumtr").hide();和$("#subttr").hide();

Answer 2

类似的东西：

$(document).ready(function() {
  //this calculates values automatically 
  sum();
  $("#num1, #num2").on("keydown keyup", function() {
    sum();
  });
});

function sum() {
  if ( ($("#num1").val().length != 0 ) && ($("#num2").val().length != 0 ) ){
      $("#sum, #subt").parent("td").parent("tr").show();
    }else{
      $("#sum, #subt").parent("td").parent("tr").hide();
  }
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var result = parseInt(num1) + parseInt(num2);
  var result1 = parseInt(num2) - parseInt(num1);
  if (!isNaN(result)) {
    document.getElementById('sum').value = result;
    document.getElementById('subt').value = result1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="" >
    <table>
        <tr>
            <td>Num 1:</td>
            <td><input type="text" name="num1" id="num1" /></td>
        </tr>
        <tr>
            <td>Num 2:</td>
            <td><input type="text" name="num2" id="num2" /></td>
        </tr>
        <tr>
            <td>Sum:</td>
            <td><input type="text" name="sum" id="sum" readonly /></td>
        </tr>
        <tr>
            <td>Subtract:</td>
            <td><input type="text" name="subt" id="subt" readonly /></td>
        </tr>
    </table>
</form>

Answer 3

给出tr元素ID（你可以在没有它的情况下获得它，但这更快）：

<tr id="third-row"><td>Sum:</td><td><input type="text" name="sum" id="sum" readonly /></td></tr>

如果需要，在页面加载时隐藏它：

#third-row {
  display:none;
}

在代码中添加两行以显示/隐藏它：

   function sum() {
            var num1 = $('#num1').val();
            var num2 = $('#num2').val();
            var result = parseInt(num1) + parseInt(num2);
            var result1 = parseInt(num2) - parseInt(num1);
            if (!isNaN(result)) {
           $('#third-row').show();
                $('#sum').val(result);
                $('#subt').val(result1);
            }
            else {
             $('#third-row').hide();
            }
        }

演示：https://jsfiddle.net/s4j7vm37/267/

仅在插入num1或num2时显示Sum / Sub文本框

3 个答案: