Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script>
  // var c;
$(document).ready(function() {
	$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      range: [1, 50]
    }
  },
  highlight: function(element) {
            $(element).addClass('error');
        }
});
var c=	$('#s').on('click', function(event) {

event.preventDefault();

var d=1;
 c = parseInt($('#field').val())+parseInt(d);

console.log(c); // Dumping value of input field on console panel

});
   
    $("#ddlist").change(function() {
        
      var selectedValue = parseInt($("#ddlist").val());
        switch(selectedValue){
        case 0:
            bcol();
            break;
        case 1:
            jcol();
            break;
        case 2:
            pcol();
            break;
        //etc... 
        default:
            alert("Select a country");
            break;
    }

    var r= $('#preq').find('tr').length;
   // var a=1;
//var z=parseInt(a);

 function bcol(){
  if (r==0){
       for(i=1;i<c;i++){
       $("#preq tbody").append('<tr><td>'+i+'</td><td>'+i+'</td></tr>');
        $("tr:odd").css("background-color", "green");
         $("tr:even").css("background-color", "red");
   }
 }
 else if(r=>c){
  $("tr:odd").css("background-color", "green");
         $("tr:even").css("background-color", "red");
 }

}

 function jcol(){
   if (r==0){
       for(i=1;i<c;i++){
       $("#preq tbody").append('<tr><td>'+i+'</td><td>'+i+'</td></tr>');
        $("tr:odd").css("background-color", "red");
         $("tr:even").css("background-color", "white");
   }
 }
 else if(r=>c){
  $("tr:odd").css("background-color", "red");
         $("tr:even").css("background-color", "white");
   }
 }


 function pcol(){
   if (r==0){
       for(i=1;i<c;i++){
       $("#preq tbody").append('<tr><td>'+i+'</td><td>'+i+'</td></tr>');
        $("tr:odd").css("background-color", "white");
         $("tr:even").css("background-color", "green");
   }
 }
  else if(r=>c){
 $("tr:odd").css("background-color", "white");
         $("tr:even").css("background-color", "green");
 }
}
});
});

</script>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

<style>
  table tr td{
  	        border-collapse: collapse;
            height:25px;
            width:100px;
            border:1px solid blue;
        }
#iframe1{
    border:none;
    width:100%;
    height:84px;
}
div {
  background-color: lightgrey;
  width: 300px;
  border: 25px solid pink;
  padding: 25px;
  margin: 0px 0px 0px 450px;
}
.error{
	color:red;
}
</style>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>take user input as table rows</title>
</head>

<body>
	<div>
<form id="myform">

<label for="field">Required, minimum 1, maximum 50:</label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" id="s" value="selected!">
</form>
</br>
<label for="k">Dropdown list:</label>
<Select id="ddlist">
<option value="">Select One</option>
<option value="0" id="b">Bangladesh</option>
<option value="1" id="j">Japan</option>
<option value="2" id="p">Pakistan</option>
</Select>
</div>

   <table id="preq" align="center">
        <tbody>
           
        </tbody>
</table>


</body>
</html>

我只想在代码说完之后就添加行，但是不行。我想通过jquery修复它吗？我想添加一次行，但它会添加更多次var c行。为什么我的代码无法正常工作？假设我想在表格中为所选项目添加3行，而其他时间只会更改颜色。它将检查行数是否为0，然后添加附加内容。否则只会改变颜色。但是这段代码对我有什么问题？

Answer 1

我不确定您的代码为什么不起作用，但是我可以看到您有时会遇到范围可变的问题。您到处都有变量，并且要在不同的范围内进行更改，这将使您很快陷入困境。

这是您要在jQuery中尝试的工作版本，也许您可以从此处进行推断：

$('document').ready(function(){ 
  // button click handler
  $('#button').on('click', function() {
    // lets see how many rows in the table
    // I'm doing this in the click handler
    // so we know it's correct at the time
    // I click the button
    var row_count = $('#preq tr').length;
    
    // Check if it's 0 or not
    if(row_count === 0) {
      // It's 0, so lets add some more rows
      for(var i = 0; i < 3; i++) {
        $('#preq tbody').append('<tr><td>'+i+'</td></tr>');
      }
    }
    else {
      // It's over 0, so lets change the
      // background colour
      $('#preq tr').css({backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16)});
    }
  });
});

body {
  font-family: sans-serif;
}

table {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="preq">
  <tbody>
  
  </tbody>
</table>

<button id="button">Click me</button>

我希望代码检查行数是否为0，然后将其添加一次。否则只会改变颜色

1 个答案: