在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文件中提取行，作爲學生成績的變量。 – 2017-04-22 04:12:22

下面的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 
     .... 
    } 
    }); 
});

當輸入值發生變化時，您可以添加一個像這樣的單元格（年級爲Im）。

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中添加新單元格到表中

回答

相關問題