Question

所以我正在制作一种成绩簿，让我可以添加基本的学生信息并将其添加到表格中。我的问题是：我无法将提交的信息显示在桌面上。

function submit(){
var firstName = document.getElementById('firstName').value
var lastName = document.getElementById('lastName').value
var finalGrade = document.getElementById('finalGrade').value
var submit = new student(firstName, lastName, finalGrade);
studentdata.addstudenttotable(submit);
resetEntries();
updateGradebook();
}
function updateGradebook(){
document.getElementById('tbody').innerHTML = '';

studentdata.data.forEach(function(elm){
    var row = document.createElement('tr')
    row.innerHTML = "<td>" + elm.firstName + "</td><td>" + elm.lastName + "</td><td>" + elm.finalGrade +"% </td>"
    document.getElementById('tbody').appendChild(row);
})

Answer 1

为您的表格提供“customer_data”的ID

function submit(){ 
                var table = document.getElementById('customer_data');
                var row = document.createElement('tr');
                var td1 = document.createElement('td');
                var td2 = document.createElement('td');
                var td3 = document.createElement('td');

                td1.innerHTML = document.getElementById('firstName').value;
                td2.innerHTML = document.getElementById('lastName').value;
                td3.innerHTML = document.getElementById('finalGrade').value;

                row.appendChild(td1);
                row.appendChild(td2);
                row.appendChild(td3);

                table.children[0].insertBefore(row, table.children[0].childNodes[1]);

                resetEntries();
          }

Answer 2

使用Jquery。请记住，类型按钮的默认操作是提交帖子或获取。所以，如果你不想这样做，你必须做event.stopProgagation（）。不使用jquery，我相信你可以做onclick="function(); return false"。 https://jsfiddle.net/50tskqtu/

$( document ).ready(function() {

    $('#btnSubmit').click(function(event) { 
        event.stopPropagation(); //stop the default behavior of type button
        var row = $('<tr></tr>')
      row.append('<td>'+$('#firstName').val()+'</td>')
      row.append('<td>'+$('#lastName').val()+'</td>')
      row.append('<td>'+$('#finalGrade').val()+'</td>')
        $('#tbody').append(row)
    });


});

使用表单添加表数据javascript

2 个答案: