1

我正在使用 FOOTABLE 创建工作板。我要添加的是用于选择作业（行）的复选框选项，以便用户可以一次将 cv 发送到多个作业。关于如何在现有表中实现这一点的任何想法？简单的例子：

<table class="footable  toggle-arrow" data-page-size="20" >
<thead>
    <tr>
        <th><!--select option id col--></th>
        <th><span>Job Description</span></th>
        <th><span>Area</span></th>
        <th><span>Number</span></th>
        <th><!--TYPE--></th>
        <th><!--SEND--></th>
    </tr>
</thead>
<tbody>
        <tr><!---JOB-->
        <td><input type="checkbox" value="id"></td>
        <td>job description value</td>
        <td>area value</td>
        <td>job number</td> 
        <td data-value="4566">4566</td>
        <td data-value="3"><img title="hot" src="vip.png" /></td>
        <td></td>
        </tr><!---END JOB-->

</tbody>

谢谢！

4

1 回答 1

1

这是您可以执行此操作的一种方法的快速示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <a id="sendSelectedButton" href="#">Send Selected</a>
  <table id="theTable">
    <thead>
      <tr>
        <th></th>
        <th>Description</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>Job 1</td>
        <td><a href="#">send</a>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>Job 2</td>
        <td><a href="#">send</a>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>Job 3</td>
        <td><a href="#">send</a>
        </td>
      </tr>
    </tbody>
  </table>
  <script>
    function sendRows(rows) {
      if (rows === undefined ||
        rows === null ||
        rows.length === 0)
        return;

      //Do stuff to send rows here.  
    }

    $(document).ready(function() {
      $("#sendSelectedButton").on("click", function() {
        var checkRows = $("#theTable").find("tbody tr").has("input:checked");
        sendRows(checkRows);
      });

      $("table").on("click", "tr a", function() {
        var row = $(this).parents("tr");
        sendRows(row);
      });
    });
  </script>
</body>
</html>

这是一个具有相同代码的 plunk：http: //plnkr.co/edit/tK4WpCvV7vSjVFmKlJIx

我没有在这里添加任何Footable，因为Footable似乎不会以某种方式影响它。

我想你会发现随着你的应用程序的成熟，事情很快就会变得更加复杂。我建议您查看某种类型的数据绑定。我个人使用 Knockout.js。即使您不决定使用 Knockout.js，我认为他们的教程也很酷。( http://knockoutjs.com/index.html )

于 2014-06-02T16:00:32.753 回答