Question

$(document).ready(function(){
         $('td:even').css('background-color', 'limegreen');
		 $('td:odd').css('background-color', 'blue');
		  
		//iterate through each textboxes and add keyup
		//handler to trigger sum event
		$(".txt").each(function() {
			 
			$(this).change(function(){
				
				calculateSum();
				checkduplicate();
				
				
			});
		});

	});
	function calculateSum() {
		var sum = 0;
		//iterate through each textboxes and add the values
		$(".txt").each(function() {
			//add only if the value is number
			if(!isNaN(this.value) && this.value.length!=0) {
				sum += parseFloat(this.value);
			}
		});
		//.toFixed() method will roundoff the final sum to 2 decimal places
		$("#sum").html(sum.toFixed(2));
		
	}

    function checkduplicate(){
	var sum = 0;
  var arr = [];
  var all = document.querySelectorAll('input[type=txt]');
  all.forEach(function(el){
    arr.push(el.value);
    sum += +el.value;
console.log(arr);
console.log(sum);
    var c = arr.filter(i =>i==el.value).length;
    if(c>1){
      var dupe = [...all].filter(e => e.value==el.value);
      dupe.forEach(function(d){
        if(d.value.trim() != ''){
          d.style.border = '5px solid red';
          d.style.color = 'red';
          document.body.style.backgroundColor = "red";
        }
      });
    }
    });
  	}		
	$(document).ready(function(){
		$('#btnClear').click(function(){				
			if(confirm("Want to clear?")){

				/*Clear all input type="text" box*/
				$('#sumtable input[type="txt"]').val(" ");
				/*Reset sum to zero*/
			     $("span").html("0");
				 document.body.style.backgroundColor = "white";
				 location.reload();
	             $('td:even').css('background-color', 'limegreen');
		        $('td:odd').css('background-color', 'blue');
				$(document).ready(function(){
         $('td:even').css('background-color', 'limegreen');
		 $('td:odd').css('background-color', 'blue');
		//iterate through each textboxes and add keyup
		//handler to trigger sum event
		$(".txt").each(function() {

			$(this).change(function(){
				calculateSum();
				checkduplicate();
				 location.reload();
	             $('td:even').css('background-color', 'limegreen');
		        $('td:odd').css('background-color', 'blue');
				/*Clear all input type="text" box*/
				$('#sumtable input[type="txt"]').val(" ");
				/*Reset sum to zero*/
			     $("span").html("0");
				 document.body.style.backgroundColor = "white";
				
			});
		});

	});
				
			}					
		});
	});

body {
	
				font-family: sans-serif;
			}
			#summation {
				font-size: 18px;
				font-weight: bold;
				color:#174C68;
			}
			.txt {
				background-color: #FEFFB0;
				font-weight: bold;
				text-align: right;
				
			}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<meta charset="utf-8"/>
<head>
<!--<script src="jquery-3.3.1.min.js"></script>-->
<script src="/home/cybrosys/Sethu/JS/jquery-3.3.1.min.js"></script>
<script src="sumbox.js"></script>
 <link rel="stylesheet" href="sumbox.css" type="txt/css">
</head>
<body>
<table  border="2" align="center" id="sumtable">
 <tbody>
        <tr>
          <td><input type="txt" class="txt"   name="txt"    id="qty1" class="form-control alldifferent"></td>
          <td><input type="txt" class="txt"   name="txt"    id="qty2" class="form-control alldifferent"></td>
          <td><input type="txt"class="txt"    name="txt"    id="qty3" class="form-control alldifferent" ></td>
        </tr>
        <tr>
          <td><input type="txt" class="txt"     name="txt"  id="qty4" class="form-control alldifferent" ></td>
          <td><input type="txt" class="txt"   name="txt"    id="qty5"  class="form-control alldifferent"></td>
          <td><input type="txt" class="txt"   name="txt"    id="qty6" class="form-control alldifferent" ></td>
        </tr>
        <tr>
          <td><input type="txt" class="txt"   name="txt"    id="qty7" class="form-control alldifferent" ></td>
          <td><input type="txt"class="txt"     name="txt"   id="qty8"  class="form-control alldifferent"></td>
          <td><input type="txt" class="txt"    name="txt"   id="qty9"  class="form-control alldifferent"></td>
        </tr>
        </tbody>
		</table>
<div align="center" >
	<tr id="summation"><br>
		<td align="center">Sum :</td>
		<td align="center"><span id="sum">0</span></td></tr>
		</div>
		<td>&nbsp;</td>
		<div align="center">
         <tr><td><button type="button" id="btnClear" value="reset"/>Reset</td></tr>
</div>
	</tr>
</body>
</html>

我无法从输入字段中删除重复的条目，也无法在这些输入字段中自动聚焦。另外，当我单击“重置”按钮时，生成的总和为Nan。

我有9个输入字段，用户可以在其中输入值。输入值后，将产生总和。当用户输入重复值时，这些条目将以红色突出显示，背景也会变为红色。

我正在尝试删除重复的条目并自动关注这些字段。在将sum重置为零并将输入字段重置为null之后。再次输入值时，生成的总和为NaN。如何解决这两个问题？

Answer 1

进行求和时需要更改颜色并添加d.focus();。试试这个：

$(document).ready(function(){
         $('td:even').css('background-color', 'limegreen');
		 $('td:odd').css('background-color', 'blue');
		  
		//iterate through each textboxes and add keyup
		//handler to trigger sum event
		$(".txt").each(function() {
			 
			$(this).change(function(){
				
				calculateSum();
				checkduplicate();
				
				
			});
		});

	});
var sum = 0;
	function calculateSum() {
		sum = 0;
		//iterate through each textboxes and add the values
		$(".txt").each(function() {
			//add only if the value is number
			if(!isNaN(this.value) && this.value.length!=0) {
				sum += parseFloat(this.value);
 this.style.color ='limegreen';
        $('td:even').css('background-color', 'limegreen');
		        $('td:odd').css('background-color', 'blue');
            this.style.border = 'limegreen';
			}
		});
		//.toFixed() method will roundoff the final sum to 2 decimal places
		$("#sum").html(sum.toFixed(2));
		
	}

    function checkduplicate(){
	var check=0;
  var arr = [];
  var all = document.querySelectorAll('input[type=txt]');
  all.forEach(function(el){
    arr.push(el.value);
    sum += +el.value;
   // console.log(arr);
//console.log(sum);
    var c = arr.filter(i =>i==el.value).length;
    if(c>1){
      var dupe = [...all].filter(e => e.value==el.value);
       check=0;
      dupe.forEach(function(d){
        if(d.value.trim() != ''){
        if (check==0){
        check=1;
        }else{
          d.style.border = '5px solid red';
          d.style.color = 'red';
          d.value="";
          d.focus();}
       
          document.body.style.backgroundColor = "red";
        }
else{
 d.style.color ='limegreen';
 $('td:even').css('background-color', 'limegreen');
		        $('td:odd').css('background-color', 'blue');
  document.body.style.backgroundColor = "white";
}
      });
    }
    });
  	}		
	$(document).ready(function(){
		$('#btnClear').click(function(){				
			if(confirm("Want to clear?")){

				/*Clear all input type="text" box*/
				$('#sumtable input[type="txt"]').val(" ");
				/*Reset sum to zero*/
			     $("span").html("0");
				 document.body.style.backgroundColor = "white";
				setTimeout(function(){
  window.location.reload(true);
});
	             $('td:even').css('background-color', 'limegreen');
		        $('td:odd').css('background-color', 'blue');
				$(document).ready(function(){
         $('td:even').css('background-color', 'limegreen');
		 $('td:odd').css('background-color', 'blue');
		//iterate through each textboxes and add keyup
		//handler to trigger sum event
		$(".txt").each(function() {

			$(this).change(function(){
				calculateSum();
				checkduplicate();
							setTimeout(function(){
  window.location.reload(true);
});
	             $('td:even').css('background-color', 'limegreen');
		        $('td:odd').css('background-color', 'blue');
				/*Clear all input type="text" box*/
				$('#sumtable input[type="txt"]').val(" ");
				/*Reset sum to zero*/
			     $("span").html("0");
				 document.body.style.backgroundColor = "white";
				
			});
		});

	});
				
			}					
		});
	});

body {
	
				font-family: sans-serif;
			}
			#summation {
				font-size: 18px;
				font-weight: bold;
				color:#174C68;
			}
			.txt {
				background-color: #FEFFB0;
				font-weight: bold;
				text-align: right;
				
			}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<meta charset="utf-8"/>
<head>
<!--<script src="jquery-3.3.1.min.js"></script>-->
<script src="/home/cybrosys/Sethu/JS/jquery-3.3.1.min.js"></script>
<script src="sumbox.js"></script>
 <link rel="stylesheet" href="sumbox.css" type="txt/css">
</head>
<body>
<table  border="2" align="center" id="sumtable">
 <tbody>
        <tr>
          <td><input type="txt" class="txt"   name="txt"    id="qty1" class="form-control alldifferent"></td>
          <td><input type="txt" class="txt"   name="txt"    id="qty2" class="form-control alldifferent"></td>
          <td><input type="txt"class="txt"    name="txt"    id="qty3" class="form-control alldifferent" ></td>
        </tr>
        <tr>
          <td><input type="txt" class="txt"     name="txt"  id="qty4" class="form-control alldifferent" ></td>
          <td><input type="txt" class="txt"   name="txt"    id="qty5"  class="form-control alldifferent"></td>
          <td><input type="txt" class="txt"   name="txt"    id="qty6" class="form-control alldifferent" ></td>
        </tr>
        <tr>
          <td><input type="txt" class="txt"   name="txt"    id="qty7" class="form-control alldifferent" ></td>
          <td><input type="txt"class="txt"     name="txt"   id="qty8"  class="form-control alldifferent"></td>
          <td><input type="txt" class="txt"    name="txt"   id="qty9"  class="form-control alldifferent"></td>
        </tr>
        </tbody>
		</table>
<div align="center" >
	<tr id="summation"><br>
		<td align="center">Sum :</td>
		<td align="center"><span id="sum">0</span></td></tr>
		</div>
		<td>&nbsp;</td>
		<div align="center">
         <tr><td><button type="button" id="btnClear" value="reset"/>Reset</td></tr>
</div>
	</tr>
</body>
</html>

对于FireFox，请使用location.reload(true);

如何从JavaScript中的输入字段中删除重复的条目

1 个答案: