Question

如何在表格的末尾插入新行？以及如何在勾选复选框后显示按钮（需要隐藏同一行）？

我不知道如何通过id的名称调用元素，就像我使用的那样...... 我试图在网上搜索，但没有任何帮助。

HTML中没有任何更改！ *

$(function(){
  console.log("Loaded")
  $("tr").hover(function () {
    $(this).css("background","#F8F8F8");
  },function () {
    $(this).css("background","");
  });	

  $("#add").click(function() {
    //something here??	
  });
});

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="q2.js"></script>
    <style>
    .hidden {
        display: none
    }
    </style>
</head>

<body>
    <div id='main'>
        <div id='button'>
            <button id='add'>Add row</button>
            <button id='hide' class='hidden'>Hide row</button>
        </div>
        <table>
            <tr>
                <td>
                    <input type='checkbox' name='row1'>
                </td>
                <td>First row</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' name='row2'>
                </td>
                <td>Second row</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' name='row3'>
                </td>
                <td>Third row</td>
            </tr>
        </table>
    </div>
</body>

</html>

Answer 1

使用

tablePart.innerHTML = "string that I want to place into a part of my table"

或

 tablePart.innerText = "string that I want to place into a part of my table"

您可以通过提供ID并使用Javascript - tablePart document.getElementById("td")来获取表格部分，例如;

Answer 2

我无法真正理解这个问题。

但是，可以使用以下代码将新行添加到表中：

＆＃13;

   // plain javascript add row function
  function addRow() {
    var tableRef = document.getElementById('myTable')
    var newRow = tableRef.insertRow(tableRef.rows.length);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode('myrow')
    newCell.appendChild(newText);
  }

// jQuery event listener
 $("#add").click(function() {
   addRow()
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
  <div id='button'>
    <button id='add'>Add row</button>
    <button id='hide' class='hidden'>Hide row</button>
  </div>
  <table id="myTable">
    <tr>
      <td><input type='checkbox' name='row1'></td>
      <td>First row</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='row2'></td>
      <td>Second row</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='row3'></td>
      <td>Third row</td>
    </tr>
  </table>
</div>

＆＃13;

请告诉我这是否是您想要实现的目标。 :)

Answer 3

检查这个

   // plain javascript add row function
  function addRow() {
    var tableRef = document.getElementById('myTable')
    var newRow = tableRef.insertRow(tableRef.rows.length);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode('myrow')
    newCell.appendChild(newText);
  }
   function deleterow() {
     var table = document.getElementById('myTable');
     var rowCount = table.rows.length;

  table.deleteRow(rowCount -1);
}
// jQuery event listener
 $("#add").click(function() {
   addRow()
 });
 $("#hide").click(function() {
   deleterow();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
  <div id='button'>
    <button id='add'>Add row</button>
    <button id='hide' class='hidden'>Hide row</button>
  </div>
  <table id="myTable">
    <tr>
      <td><input type='checkbox' name='row1'></td>
      <td>First row</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='row2'></td>
      <td>Second row</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='row3'></td>
      <td>Third row</td>
    </tr>
  </table>
</div>

如何用JS在表的末尾添加行？

3 个答案: