Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
<table id="myTable">
  <tr>
    <td class="content">
      <span class="speise">SPEISE</span>
      <span class="beschr">BESCHREIBUNG</span>
    </td>
    <td class="btns">
      <div class="remove">REMOVE</div></td>
    <td class="btns">
      <div class="edit">Edit</div>
      <a class="up">Up</a>
    <a class="down">Down</a>
    </td>
    
  </tr>
    <tr>
    <td class="content">
            <span class="speise">SPEISE</span>
      <span class="beschr">BESCHREIBUNG2</span>
​
      </td>
    <td class="btns">
      <div class="remove">REMOVE</div></td>
          <td class="btns">
      <div class="edit">Edit</div>
       
     <a class="up">Up</a>
    <a class="down">Down</a>
      </td>
​
  </tr>
    
</table>
  Speise<br>
  <input class="addnew" type="text" id="name" />
  <br>Beschreibung <br>
  <input class="addnew2" type="text" id="name" />
<div id="target">Add</div>
<div id="target2">Add2</div>
  <button>Result</button>
  <div><table class="result"></table></div>
  <div class="test"></div>
</body>
</html>
​
 
$(document).ready(function() {
  //sort
    $("#myTable").on('click', '.up, .down', function(event){
      var row = $(this).closest("tr");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
      row.fadeOut();
      row.fadeIn();
    });
  //fix dd width of rows
    $(function() {
      var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};
​
      $( "#myTable tbody" ).sortable({
        helper: fixHelper
      });
        $( "#myTable tbody" ).disableSelection();
    });
​
//buttons  
 var savebtn = "<div class=\"save\">Save</div>";
  
  var editbtn = "<div class=\"edit\">Edit</div>";
  
  var removebtn = "<div class=\"remove\">REMOVE</div>";
  
  var upbtn = "<a class=\"up\">Up</a><a class=\"down\">Down</a>";
  
$("#target").click(function() {
//add  
  var speise = $(".addnew").val();
  var beschr = $(".addnew2").val();
$('#myTable tr:last').after('<tr class="frst"><td class="content"><span class="speise">' + speise + '</span><span class="beschr">' + beschr + '</span></td><td class="btns">' + removebtn + '</td><td class="btns">' + editbtn + upbtn + '</td></tr>');
});
$("#myTable").on('click', '.remove', function(event) {
  $(this).parent().parent().remove();
});
​
//edit
$("#myTable").on('click', '.edit', function(event) {
  var speise = $(this).closest("tr").find(".speise").text();
  var beschr = $(this).closest("tr").find(".beschr").text();
  $(this).closest("tr").find(".content").html('<input class="sp" value="' + speise + '"/><br><input class="be" value="' + beschr + '"/>');
  
   $(this).parent().html(savebtn);
​
});
 
//save
​
$("#myTable").on('click', '.save', function(event) {
  var speise = $(this).closest("tr").find(".sp").val();
  var beschr = $(this).closest("tr").find(".be").val();
$(this).closest("tr").find(".content").html('<span class="speise">' + speise + '</span><span class="beschr">' + beschr + '</span>');
  
  $(this).parent().html(editbtn);
​
});
​
//result
​
​
​
});
​
$("button").click(function() {
var data = "";
$("#myTable tr td:first-child").each(function(){
  data+= '<tr style="height:' + $("#myTable tr").height() + '"><td>' + $(this).text() + '</td></tr>';
});
  $(".result").html(data);
});
​
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers