jQuery copy cloned rows from one table to another with added td columns -

-

using jquery, need copy, rows, 1 @ at time, dragging table1 table2, leaving row unchanged in table1. on dropping in table2, need add 2 new columns row dropped in table2. rows need drag/dropped in table2 rearrange them. ok adds new data column table2 sending server. following code works. problem if drop occurs before mouse on table2, columns added table1. code follows:

<!doctype html> <html lang="en"> <head>  <meta charset='utf-8'> <!-- <link rel='stylesheet' href='style/jquery-ui.css'> --> <script src='js/jquery-1.11.0.min.js'></script> <script src='js/jquery-ui.min.js'></script> <style type="text/css"> .tables_ui {   display:inline-block;   margin:2px 2%;   border:2px solid #3333fe;   border-spacing:0; } .tables_ui ul li {   min-width: 200px; } .dragging li.ui-state-hover {   min-width: 240px; } .dragging .ui-state-hover {   color:green !important;   font-weight: bold; } .tables_ui th,td {   text-align: left;   padding: 2px 4px;   border: 1px solid; } .connectedsortable tr, .ui-sortable-helper {   cursor: move; } .connectedsortable tr:first-child {   cursor: default; } .ui-sortable-placeholder {   background: yellow; } .ui-layout-center {     width: 400px;     height: 300px;     border: 1px solid black; }  .ui-state-hover {     background-color: #f9ffff;    } </style>  <script> function dorows() {     $('#sortable2').find('tr').each(function(index){         if (index > 0) {             $('#sortable2 tr').eq(index).find('td').eq(5).remove(); //remove data column if exists             var valid = $('#sortable2 tr').eq(index).find('td').eq(2).html();             var valnext = $('#sortable2 tr').eq(index).find('input').val();             $(this).append("<td><input style='cursor: default;' name='namedata' value='" + index + '~' + valid + '~' + valnext + "' /></td>");         }     }); }  $(document).ready(function() { $("#sortable1").sortable({     connectwith: ".connectedsortable",     helper: function (e, tr) {             this.copyhelper = tr.clone().insertafter(tr);             $(this).data('copied', false);             $(this).find('tr').each(function(index){         });         tr.append("<td><input  style='cursor: default;' value='0' /></td>");         tr.append("<td><a style='cursor: default;' onclick='deleterow($(this));'>delete</a></td>");         return tr.clone();     },     stop: function () {         var copied = $(this).data('copied');         if (copied) {             $('#initial').remove(); //remove initial row         }         if (!copied) {             this.copyhelper.remove();         }         this.copyhelper = null;     } });  $("#sortable2").sortable({     receive: function (e, ui) {         ui.sender.data('copied', true);     } });   //to add order number of rows text    $( "#sortable2" ).sortable({ //only done when table2 reearranged         stop: function( event, ui ){             $(this).find('tr').each(function(index){             });         }    });  $('form').on('submit', function (e) {     e.preventdefault(); });  });  function deleterow(row) {     row.closest('tr').remove(); } </script>  </head> <body> <table class="tables_ui"> <caption><h4>existing names</h4></caption> <tbody id="sortable1" class="connectedsortable">   <tr>     <th>number</th>     <th>name</th>       <th>id</th>     </tr>   <tr>     <td>s03</td>                                                                                              <td>name3</td>                                                                   <td>id4</td>                                                                                            </tr>   <tr>     <td>s01</td>                                                                                              <td>name1</td>                                                                   <td>id2</td>                                                                                            </tr>   <tr>       <td>s02</td>                                                                                              <td>name2</td>                                                                   <td>id6</td>                                                                                            </tr> </tbody></table>  <table class="tables_ui"> <caption><h4>when names arranged in order create sequence, enter time previous name in minutes. click ok.</h4></caption> <tbody id="sortable2" class="connectedsortable">   <tr>     <th>number</th>     <th>name</th>       <th>id</th>       <th>time in minutes previous name</th>       <th>delete</th>     </tr>   <tr id='initial'>       <td colspan='5' style='width: 300px;'>drop , rearrange names here</td>                                                                                            </tr> </tbody> </table>  <form> <input type='submit' value='ok' onclick='dorows();' /> </form> </body> </html>


Comments

Post a Comment

Popular posts from this blog

c# - Better 64-bit byte array hash -

-
i need hash algorithm produces 64-bit hash code ( long ) fewer collisions string.gethashcode() , fast (no expensive calls cryptographic functions). here's implementation of fnv still shows 3% of collisions after testing 2 million random strings. need number way lower. void main() { const string chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!#@$%^&*()_+}{\":?><,./;'[]0123456789\\"; const int n = 2000000; var random = new random(); var hashes = new hashset<long>(); int collisions = 0; for(int = 0; < n; i++) { var len = random.next(chars.length); var str = new char[len]; (int j = 0; j < len; j++) { str[j] = chars[random.next(chars.length)]; } var s = new string(str); if(!hashes.add(get64bithash( s ))) collisions++; } console.writeline("collision percentage after " + n + " random strings: " + ((doubl
Read more

webrtc - Which ICE candidate am I using and why? -

-
[questions in bold below] i have setup kurento media server 5.1.3 in datacenter behind firewall running os ubuntu 14.04. has 2 network cards: 222.222.222.222 (eth0 - private ip) 111.111.111.111 (eth1 - public ip) attached below sdp (setremotedescription) when browser connected kurento media server type: answer, sdp: v=0 o=- 5487318114793304426 0 in ip4 0.0.0.0 s=kurento media server c=in ip4 0.0.0.0 t=0 0 a=group:bundle audio video m=audio 59068 rtp/savpf 111 0 c=in ip4 111.111.111.111 a=rtpmap:111 opus/48000/2 a=rtpmap:0 pcmu/8000 a=sendrecv a=rtcp:59068 in ip4 111.111.111.111 a=rtcp-mux a=ssrc:669011897 cname:user39019747@host-6e83e4c2 a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time a=mid:audio b=as:20 a=ice-ufrag:ymdk a=ice-pwd:lylifk5ueqzpwm91ddj37e a=fingerprint:sha-256 ff:0f:81:8c:41:4e:b4:b6:c6:d8:36:f3:d6:5f:09:fd:5f:af:13:b3:9d:fc:12:66:ac:f3:56:d6:5b:0a:73:5d a=candidate:1 1 udp 2013266431 111.111.111.111 55239 typ host a=candidate:2 1 udp
Read more

php - Zend Framework / Skeleton-Application / Composer install issue -

-
i trying create zend framework application using skeleton in netbeans. when run composer install, following error message: "c:\php\php.exe" "c:\composer\composer.phar" "--ansi" "--no-interaction" "update" "--dev" using deprecated option "dev". dev packages installed default now. loading composer repositories package information updating dependencies (including require-dev) requirements not resolved installable set of packages. problem 1 - package requires php >=5.5 php version (5.4.42) not satisfy requirement. problem 2 - installation request zendframework/zendframework 2.5.1 -> satisfiable zendframework/zendframework[2.5.1]. - zendframework/zendframework 2.5.1 requires php >=5.5 -> php version (5.4.42) not satisfy requirement. done. apparently, zend framework only needs php 5.3+ contradicts above. need use php 5.4. my composer.json following: { "name": "
Read more