Footable 2 Select rows

I'm using FOOTABLE to create job board. What I want to add is a checkbox option to select jobs (rows) so users can send cv to multiple jobs at once. Any idea on how to implement this in existing table? simple example:

<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>

Thanks!

Solution

Here's a quick example of one way you could do this:

<!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>

Here's a plunk with the same code: http://plnkr.co/edit/tK4WpCvV7vSjVFmKlJIx

I didn't add any Footable here because it doesn't seem like that Footable will affect it one way or another.

I think you'll find that things quickly get a lot more complex as your application matures. I'd suggest you look some type of data binding. I personally use Knockout.js. Even if you don't decide to use Knockout.js, I think their tutorial is pretty cool. (http://knockoutjs.com/index.html)