2017-12-12 4 views
0

を壊す変更だから私は、新しい行が追加されるたびに、テーブル内のフォーム要素を置き、選択した項目を作成し、行数のオプションを追加し、簡単なjQueryのプログラムを作成しました:は、私は、コード

<!DOCTYPE html> 
<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     var i=1; 
     $("#kopche").click(function(){ 
      var name=$("#name"); 
      var index=$("#indeks"); 
      var grade=$("#grade"); 

      alert("Grade"); 

      var body=$("#body"); 
      body.append("<tr><td>"+name.val()+"</td><td>"+index.val()+"</td><td>"+grade.val()+"</td></tr>"); 

      name.val(""); 
      index.val(""); 
      grade.val("5"); 
      if(i==1) 
      { 
       $("table").after('<br/><br/><select id="brojka"></select>'); 
       var br=$("#brojka"); 
      } 
      br.append('<option>'+i+'</option>'); 

      i=i+1; 

      alert("Okey"); 
     }); 
    }); 
</script> 
</head> 
<body> 
Name: <input type="text" id="name"/><br/><br/> 
Index: <input type="text" id="indeks"/><br/><br/> 
Grade: <select id="grade"> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
    <option>10</option> 
</select> <br/><br/> 

<button id="kopche">Add</button> 
<br/><br/> 

<table border="1"> 
<thead> 
<tr> 
    <td>Name</td> <td>Index</td> <td>Grade</td> 
</tr> 
</thead> 
<tbody id="body"> 

</tbody> 
</table> 

</body> 
</html> 

しかし、プログラムが正常に動作していません。 i = i + 1行目に問題があるようです。

アイデア?

+1

「*がうまく動作していない」*より意味がある*以上のものが必要です。 [ask]と[mcve]を読んでください。 – charlietfl

答えて

1

i場合はbr変数を設定していないが、1

ではありませんここで修正があります。

$(document).ready(function(){ 
     var i=1; 
     $("#kopche").click(function(){ 
      var name=$("#name"); 
      var index=$("#indeks"); 
      var grade=$("#grade"); 

      alert("Grade"); 

      var body=$("#body"); 
      body.append("<tr><td>"+name.val()+"</td><td>"+index.val()+"</td><td>"+grade.val()+"</td></tr>"); 

      name.val(""); 
      index.val(""); 
      grade.val("5"); 
      if(i==1) 
      { 
       $("table").after('<br/><br/><select id="brojka"></select>'); 
      } 
      var br=$("#brojka"); 
      br.append('<option>'+i+'</option>'); 

      i=i+1; 

      alert("Okey"); 
     }); 
    }); 

これが役立ちます。