Я хочу, чтобы код проверил, если строки = 0, то он добавит добавить один раз.иначе это только изменит свой цвет - PullRequest
Новая
       20

Я хочу, чтобы код проверил, если строки = 0, то он добавит добавить один раз.иначе это только изменит свой цвет

0 голосов
/ 28 декабря 2018 

<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, то он добавит добавление.иначе это только изменит свой цвет.Но что не так со мной в этом коде?

1 Ответ

0 голосов
/ 09 января 2019

Я не уверен, почему ваш код не работает, но я вижу, что в какой-то момент вы столкнетесь с множеством проблем с переменной областью действия.У вас везде есть переменные, и вы меняете их в разных областях, что очень скоро приведет к неприятностям.

Вот рабочая версия того, что вы пытаетесь сделать в 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>
...