Basic usage

Demonstration

+
-

HTML

        <table class="table table-striped">
          <tbody>
            <tr class="crudable">
              <td>
                <div class="input-group">
                  <label class="input-group-addon"> What's include? </label>
                  <input class="form-control include_text" placeholder="included item" value="Free drink!" name="include" type="text">
                </div>
              </td>
              <td>
                <select name="highlight">
                  <option value="0"> no highlight </option>
                  <option value="1"> highlight </option>
                </select>
              </td>
              <td> <div class="crudable-create btn btn-info">   + </div> </td>
              <td> <div class="crudable-delete btn btn-danger"> - </div> </td>
            </tr>
          </tbody>
        </table>
      

Javascript

        $('.crudable').crudable();
      

With after create callback

Demonstration

From To
+
-

HTML

    <tbody>
      <tr class="crudable-daterange">
        <td class="col-md-7">
          <div class="input-daterange">
            <span class="add-on" style="vertical-align: top; height:30px"> From </span>
            <input type="text" style="vertical-align: top; height:30px" name="start" value="2015-12/08">
            <span class="add-on" style="vertical-align: top;height:30px"> To </span>
            <input type="text" style="vertical-align: top;height:30px" name="end" value="2015-12/31">
          </div>
        </td>
        <td class="col-md-4">
          <div class="input-group">
            <label class="input-group-addon"> Price </label>
            <input type="text" class="form-control" name="price" value="78" placeholder="leave this empty for a default value">
          </div>
        </td>
        <td> <div class="crudable-create btn btn-info">   + </div> </td>
        <td> <div class="crudable-delete btn btn-danger"> - </div> </td>
      </tr>
    </tbody>
      

Javascript

  $('.crudable-daterange').crudable({
    crudableLabel: "crudable-daterange",
    afterCreate:   function(element) {
      element.find('.input-daterange').datepicker();
    }
  });
      

nested crudable

Demonstration

Add a new day Delete this day
+
-
    <div class="table-day">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              <div class="input-group">
                <label for="date" class="input-group-addon"> Date </label>
                <input class="form-control" value="A tour near city" name="date" type="text">
              </div>
            </th>
            <th>
              <a class="create-day btn btn-default">Add a new day </a>
              <a class="delete-day btn btn-danger">Delete this day</a>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="crudable">
            <td>
              <div class="input-group">
                <label class="input-group-addon"> Plan </label>
                <input class="form-control" value="" name="plan" type="text">
              </div>
            </td>
            <td>
              <div class="input-group">
                <label class="input-group-addon"> Time </label>
                <input class="form-control" value="" name="time" type="text">
              </div>
            </td>
            <td>
              <div class="crudable-create btn btn-info">+</div>
            </td>
            <td>
              <div class="crudable-delete btn btn-danger">-</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
      

Javascript

        $('.table-day').crudable({
          crudableLabel: "table-day",
          createLabel:   "create-day",
          deleteLabel:   "delete-day",
          afterCreate:   function(element) {
            element.find('.crudable').crudable();
          },
        });