JavaScriptを使用してテーブルに新しいセルを追加する

生徒が新しい件名をテーブルに追加する必要があるたびに自動的に新しい行が表示されるようにするには、このコードを使用します。必要なすべての情報を入力した後、学生はテーブルに追加された新しいセルに表示されるはずの各科目の成績とGPAを学生が見ることを可能にするボタンをクリックする必要があります。JavaScriptを使用してテーブルに新しいセルを追加する

私の質問は、学生が入力した予想マークに基づいて各科目の成績とGPAを自動的に表示するにはどうすればよいですか？

<html> 
 
<title> GPA Calculator </title> 
 

 
<head> 
 

 
    <script> 
 
    function addRow(myTable) { 
 
     var table = document.getElementById("myTable"); 
 

 
     var rowCount = table.rows.length; 
 
     var row = table.insertRow(rowCount); 
 

 
     var cell1 = row.insertCell(0); 
 
     var element1 = document.createElement("input"); 
 
     cell1.appendChild(element1); 
 

 
     var cell2 = row.insertCell(1); 
 
     var element2 = document.createElement("input"); 
 
     cell2.appendChild(element2); 
 

 
     var cell3 = row.insertCell(2); 
 
     var element2 = document.createElement("input"); 
 
     cell3.appendChild(element2); 
 

 
     var cell4 = row.insertCell(3); 
 
     var element3 = document.createElement("input"); 
 
     cell4.appendChild(element3); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <table id="myTable" border="1" ; width: "100%"> 
 
    <tr> 
 
     <th>Code 
 
     <th>Subject 
 
     <th>Credit 
 
     <th>Expected Mark 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="text" name="code1" value="SCJ119"></td> 
 
     <td><input type="text" name="subject1" value="Object-Oriented Programming"> 
 
     </td> 
 
     <td><input type="text" name="credit1" value="4"></td> 
 
     <td><input type="text" name="mark1" value=""></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="text" name="code2" value="SCK302"></td> 
 
     <td><input type="text" name="subject2" value="Software Engineering"></td> 
 
     <td><input type="text" name="credit2" value="3"></td> 
 
     <td><input type="text" name="mark2" value=""></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="text" name="code3" value="SCO107"></td> 
 
     <td><input type="text" name="subject3" value="Operating System"></td> 
 
     <td><input type="text" name="credit3" value="3"></td> 
 
     <td><input type="text" name="mark3" value=""></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="text" name="code4" value="SSV901"></td> 
 
     <td><input type="text" name="subject4" value="Web Programming"></td> 
 
     <td><input type="text" name="credit4" value="3"></td> 
 
     <td><input type="text" name="mark4" value=""></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="text" name="code5" value="ENG213"></td> 
 
     <td><input type="text" name="subject5" value="Advanced Academic English 
 
    Skills"></td> 
 
     <td><input type="text" name="credit5" value="2"></td> 
 
     <td><input type="text" name="mark5" value=""></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="text" name="code6" value="QBS221"></td> 
 
     <td><input type="text" name="subject6" value="Structure and Functions of 
 
    Proteins"></td> 
 
     <td><input type="text" name="credit6" value="3"></td> 
 
     <td><input type="text" name="mark6" value=""></td> 
 
    </tr> 
 

 
    </table> 
 

 
    <br><input type="button" value="Add Subject" onclick="addRow('myTable')"> 
 

 
</body> 
 

 
</html>

出典

2017-04-22 beginner96

あなたの質問は何ですか？ – jmargolisvt

@jmargolisvt私の質問は、学生が入力した予想マークに基づいて各科目の成績とGPAを自動的に表示するために新しいセルを追加するにはどうすればいいですか？ – beginner96

"gpa"とは何ですか（私は等級点平均と思われます）、どのように計算されますか？グレードはどこに定義されていますか？ – RobG

@RobGは、私が唯一の方法は、私の知る限り、SQLデータベースを使用するようになり、それがSQLクライアントを介して更新されてきたと思います。これは、ISS（Windows Vista +に組み込まれている）や他のサードパーティのSQLクライアントのようなソフトウェアで行うことができます。

編集：@RobGしかし、これを達成する最も簡単な方法は、学生や学生が持っている成績の変数として使用するデータベースやMicrosoft Excelファイルから行をフェッチすることです。

出典

2017-04-22 04:00:44

となり、お勧めします。しかし、これはjavascriptの割り当てですので、私は割り当ての要件を満たすために、javascript、html、およびcssの知識を適用する必要があります。 – beginner96

@RobGしかし、これを達成する最も簡単な方法は、データベースやMicrosoft Excelファイルから行をフェッチして、学生が持つ等級の変数として使用することです。 –

以下のjqueryは、要素の値が変更されたときに機能します。

$('.myElements').each(function() { 
    var elem = $(this); 

    // Save current value of element 
    elem.data('oldVal', elem.val()); 

    // Look for changes in the value 
    elem.bind("propertychange change click keyup input paste", function(event){ 
     // If value has changed... 
     if (elem.data('oldVal') != elem.val()) { 
     // Updated stored value 
     elem.data('oldVal', elem.val()); 

     // Do action - You can call javascript function to add cell 
     .... 
    } 
    }); 
});

入力値が変更されたら、このように1つ以上のセルを追加できます（Im in grade）。

var row = document.getElementById("myRow"); 
var x = row.insertCell(0); 
x.innerHTML = "New cell";

すべての成績を取得したら、希望するように成績の値からGPAを計算することができます。

これはあなたが仲良しに役立つことを願っています。

出典

2017-04-22 04:14:04

jQueryタグはありませんし、OPでも使用されていないので、あなたの答えはそれに依存するべきではありません。また、jQuery [* .bind *]（https://api.jquery.com/bind/）は以前から廃止されています（2011年11月のバージョン1.7以降）。 * .myElements *で選択される要素は何ですか？それぞれのクレジットと予想されるマーク入力に6人のリスナーを追加することを提案していますか？ – RobG

あなたは正しいですが、私はjqueryである欠けているタグを認識していませんが、それは大きな問題ではないと思います。はい、私は彼らがより良い方法であることを示唆していますが、私はこの解決策を考え出しました。 –

JavaScriptを使用してテーブルに新しいセルを追加する

答えて

関連する問題