在javascript中将新单元格添加到表中

时间:2017-04-22 03:38:13

标签: javascript html css

每次学生需要在表格中添加新主题时,我都会使用此代码自动显示新行。在输入所需的所有信息后,学生将不得不点击一个按钮,该按钮将使学生能够查看应该在表格的新添加单元格中显示的每个科目的成绩和gpa。

我的问题是,如何根据学生输入的预期分数添加新单元格以自动显示每个科目的成绩和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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

@RobG我认为,据我所知,唯一的方法是使用SQL数据库并通过SQL客户端进行更新。这可以通过ISS(内置于Windows Vista +)或其他第三方SQL客户端等软件完成。

编辑:@RobG,我知道,但是,实现此目的的最简单方法是从数据库或甚至Microsoft Excel文件中提取行,以用作学生所拥有成绩的变量。

答案 1 :(得分:0)

当元素的值改变时,下面的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 in grade);

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

获得所有成绩后,您可以根据自己的意愿从成绩的值中计算出GPA。

我希望这可以帮助你交配。