JS---案例：無刷新評論---屬於建立對象的案例拿出來複習

時間 2019-12-26

原文原文鏈接

案例：無刷新評論---屬於建立對象的案例拿出來複習

建立行和單元格，添加到相應元素中，設置內容 createElement, appendChild,innerHTMLhtml

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <table id="tb" border="1">
    <tbody id="tbd">
      <tr>
        <td>豬豬:</td>
        <td>我喜歡吃肉</td>
      </tr>
    </tbody>
  </table>
  <div>
    暱稱:<input type="text" value="" id="userName" /><br />
    <textarea name="" id="tt" cols="30" rows="10"></textarea><br />
    <input type="button" value="評論一下" id="btn" /><br />
  </div>
  <script src="common.js"></script>
  <script>
    //獲取按鈕，註冊點擊事件
    document.getElementById("btn").onclick = function () {
      //獲取暱稱
      var userName = my$("userName");
      //獲取評論  
      var tt = my$("tt");
      //建立行
      var tr = document.createElement("tr");
      //行加到tbody中
      my$("tbd").appendChild(tr);
      //建立單元格td1,並添加到行
      var td1 = document.createElement("td");
      tr.appendChild(td1);
      td1.innerHTML = userName.value;
      //建立單元格td2,並添加到行
      var td2 = document.createElement("td");
      tr.appendChild(td2);
      td2.innerHTML = tt.value;
      //清空
      userName.value = "";
      tt.value = "";
    };
  </script>

</body>

</html>

相關標籤/搜索

案例