有什么方法可以使函数向表中添加一行？

问题描述 投票：0回答：1

我的代码有问题，未将信息插入表中，这是编程新手，当我单击添加按钮时，我认为应该将新信息插入表中。似乎正在插入，但未在我的屏幕或表格中显示。我正在尝试制作一张桌子，可以将我的课本插入桌子。

任何技巧或窍门？

<head>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td,
        th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
</head>

<body>

    <h2>Semester Books</h2>

    <table id="schoolBooks">

        <tr>

            <th>Title</th>
            <th>Year</th>
            <th>E-book</th>

        </tr>
        <tr>
            <td>Programming Language</td>
            <td>2018</td>
            <td>yes</td>


        </tr>

        <tr>
            <td>Database Systems</td>
            <td>2000</td>
            <td>yes</td>


        </tr>
        <tr>
            <td>Algorithms and Data Structure</td>
            <td>1995</td>
            <td>no</td>


        </tr>
        <tr>
            <td>Programming in C++</td>
            <td>1999</td>
            <td>no</td>


        </tr>
        <tr>
            <td>Compiler Design</td>
            <td>2018</td>
            <td>yes</td>


        </tr>
    </table>
    <br>
    <form onsubmit="addRow();return false">

        <div>
            <label for="title">Title:</label>
            <input type="text" id="aTitle" name="user_title" required="required" pattern="[A-Za-z0-9]{1,20}">



        </div>
        <br>
        <div>

            <label for="name">Year:</label>
            <select name="dropdown" id="aYear" name="user_year">
                <option value="1990">1990</option>
                <option value="1991">1991</option>
                <option value="1992">1992</option>
                <option value="1993">1993</option>
                <option value="1994">1994</option>
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <option value="1997">1997</option>
                <option value="1998">1998</option>
                <option value="1999">1999</option>
                <option value="2000">2000</option>
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>

            </select>




        </div>
        <br>
        <div>
            <label for="mail">E-Book</label>
            <br>
            <input type="radio" id="aYes" name="user_points" value="yes"> Yes<br>
            <input type="radio" id="bNo" name="user_points" value="no"> No <br>

        </div>

        <button type="submit"> Add </button>



    </form>


<script>
    function addRow() {
        var table =
            document.getElementById("schoolBooks");
        var row = table.insertrow(-1);
        var title = row.insertCell(0);
        var year = row.insertcell(1);
        var ebook = row.insertCell(2);

        var ebookValue = getRadioVal();
        var titleValue = document.getElementById("aTitle").value;
        var yearValue = document.getElementById("aYear").value;

        title.innerHTML = titleValue;
        year.innerHTML = yearValue;
        ebook.innerHTML = ebookValue;

    }

    function getRadioVal() {
        var ebookValue = "";
        if (document.getElementById("aYes").checked) {
            pointValue = document.getElementById("aYes").value;
        } else if (document.getElementById("bNo").checked) {
            pointValue = document.getElementById("bNo").value;
        }
        return ebookValue;
    }
</script>
javascript html-table row
1个回答
0
投票

第一期->

//您必须使用e.preventDefault（）来阻止页面提交表单时重新加载第二个问题->“ insertrow”应为“ insertRow”，“ insertCell”应为“ insertCell”。

校正后的代码：

<h2>Semester Books</h2>

<table id="schoolBooks">

      <tr>

            <th>Title</th>
            <th>Year</th>
            <th>E-book</th>

      </tr>
      <tr>
            <td>Programming Language</td>
            <td>2018</td>
            <td>yes</td>


      </tr>

      <tr>
            <td>Database Systems</td>
            <td>2000</td>
            <td>yes</td>


      </tr>
      <tr>
            <td>Algorithms and Data Structure</td>
            <td>1995</td>
            <td>no</td>


      </tr>
      <tr>
            <td>Programming in C++</td>
            <td>1999</td>
            <td>no</td>


      </tr>
      <tr>
            <td>Compiler Design</td>
            <td>2018</td>
            <td>yes</td>


      </tr>
</table>
<br>
<form id="main_form">

      <div>
            <label for="title">Title:</label>
            <input type="text" id="aTitle" name="user_title" required="required" pattern="[A-Za-z0-9]{1,20}">



      </div>
      <br>
      <div>

            <label for="name">Year:</label>
            <select name="dropdown" id="aYear" name="user_year">
            <option value="1990">1990</option>
            <option value="1991">1991</option>
            <option value="1992">1992</option>
            <option value="1993">1993</option>
            <option value="1994">1994</option>
            <option value="1995">1995</option>
            <option value="1996">1996</option>
            <option value="1997">1997</option>
            <option value="1998">1998</option>
            <option value="1999">1999</option>
            <option value="2000">2000</option>
            <option value="2001">2001</option>
            <option value="2002">2002</option>
            <option value="2003">2003</option>
            <option value="2004">2004</option>
            <option value="2005">2005</option>
            <option value="2006">2006</option>
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>

            </select>




      </div>
      <br>
      <div>
            <label for="mail">E-Book</label>
            <br>
            <input type="radio" id="aYes" name="user_points" value="yes"> Yes<br>
            <input type="radio" id="bNo" name="user_points" value="no"> No <br>

      </div>

      <button type="submit"> Add </button>



</form>

JS：

<script>
document.getElementById("main_form").onsubmit = function(e){
      e.preventDefault();
      addRow();
}
function addRow() {
      var table = document.getElementById("schoolBooks");
      var row = table.insertRow(-1);
      var title = row.insertCell(0);
      var year = row.insertCell(1);
      var ebook = row.insertCell(2);

      var ebookValue = getRadioVal();
      var titleValue = document.getElementById("aTitle").value;
      var yearValue = document.getElementById("aYear").value;

      title.innerHTML = titleValue;
      year.innerHTML = yearValue;
      ebook.innerHTML = ebookValue;

}

function getRadioVal() {
      var ebookValue = "";
      if (document.getElementById("aYes").checked) {
            pointValue = document.getElementById("aYes").value;
      } else if (document.getElementById("bNo").checked) {
            pointValue = document.getElementById("bNo").value;
      }
      return ebookValue;
}
</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.