jquery - Switch row on second click -


i have table persons , want sort them manually, without drag , drop. want select person clicking on row, select person clicking on them , 2 should switch positions.

i´ve no problem select 1 row, im stucked @ how select second one. think swichting rows possible jquery replacewith.

$(document).ready(function(){   var selections = new array(2);   $("tr").click(function() {      var selected = $(this).attr('id');      //highlight selected row     $(this).toggleclass("marked");    })  }); 

i´ve created fiddle here: http://jsfiddle.net/zlz929xy/3

any or hints great.

i made changes, illustrates how without bothering arrays , looping or of that. we'll ever have 1 row marked "marked", there's no need iterate or check classes when removing "marked" class.

also, since we're switching entirety of rows, can grab of html instead of splitting separate bits of information track , operate on.

$(document).ready(function(){      // need able know values of both clicked rows , whether or      // not selected      var somethingselected = false;      var firstrow;      var firstrowhtml;      var secondrow;            // when click tr, 1 of 2 things should happen - selecting first      // row, or picking second row , making switch - , 1      // depend on whether or not somethingselected var true or false      $("tr").click(function() {          if (somethingselected) {              secondrow = $(this);              firstrow.html(secondrow.html());              secondrow.html(firstrowhtml);              somethingselected = false;              $("tr").removeclass("marked");          } else {              somethingselected = true;              firstrow = $(this);              firstrowhtml = firstrow.html();              $(this).addclass("marked");          }      });   });
html {   font-family: verdana;   font-size: 10pt;  }    td{  border: 1px solid;  }    .marked {   background: #e5e5e5;   font-weight: bold;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <table id="people">        <tr>          <th id="id">id</th>          <th id="name">name</th>      </tr>        <tr id="user_1">          <td headers="id">1</td>          <td headers="name">bob</td>      </tr>      <tr id="user_2">          <td headers="id">2</td>          <td headers="name">carl</td>      </tr>      <tr id="user_3">          <td headers="id">3</td>          <td headers="name">jane</td>      </tr>      <tr id="user_4">          <td headers="id">4</td>          <td headers="name">steven</td>      </tr>      <tr id="user_5">          <td headers="id">5</td>          <td headers="name">sarah</td>      </tr>      <tr id="user_6">          <td headers="id">6</td>          <td headers="name">marc</td>      </tr>    </table>


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -