Question

我目前使用HTML / jQuery / CSS制作类似Excel的网格。

我想知道是否有办法在用户自定义的请求中添加更多行（点击按钮或其他内容）。

我在w3schools的JS中看到了一些HTML DOM示例，但我不知道它是否可以在jQuery中使用。我很欣赏任何一个简单的例子。

Answer 1

根据您的需要，使用以下代码进行理解和修改

function addRow(){
  
  var str ="<tr><td>data 1</td><td>data 2</td><td>data 3</td></tr>";
  
  $('#mytable tbody').append(str);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<table id="mytable" border="1">
  <thead>
    <tr>
    <th>Head 1</h1>
    <th>Head 1</h1>
    <th>Head 1</h1>
   </tr>
   
</thead>
<tbody>
  <tr>
    <td>data 1</td>
    <td>data 2</td><td>data 3</td>
    </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td><td>data 3</td>
    </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td><td>data 3</td>
    </tr>
  </tbody>
    </table>
      
    <input type="button" value="Add" onclick="addRow()" />

Answer 2

我会给你一些起点朋友，首先你可能需要学习/使用ajax，这样如果你需要通过mysql或任何数据库获取数据，你可以与你的服务器端语言进行通信

然后你可以使用javascript通过DOM操作附加ajax响应。

请阅读jquery DOM manipulation。

修改

你的流程应该是这样的。

通过jquery .click（）在按钮 onclick 事件上添加处理程序，该处理程序应包含ajax请求$ .ajax（）。

通过＆＃34;成功＆＃34;检测ajax的成功$ .ajax（）
上的参数
然后成功通过DOM 追加将响应数据附加到容器中。

Answer 3

HTML

<table id="someTable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
    </tbody>
</table>

<button id="newrow">+</button>

JS

$(document).ready(function()
                  {
                      var table = $('#someTable'), 
                          newRow = '<tr><td>New Row Val</td><td>New Row Val</td></tr>';
                     $('#newrow').on('click', function(e)
                                     {
                                         table.find('tbody').append(newRow);
                                     });
                  });

http://jsfiddle.net/vw437k03/1/演示了我认为你想要的一个非常基本的例子。

使用提供的代码从AJAX或表单加载数据。

P.S look @ slickgrid - http://mleibman.github.io/SlickGrid/examples/example-spreadsheet.html

根据请求

3 个答案: