Html Table with javascript -


i have 2 tables different table-id in html, follows -

  1. table-header - consists of dynamic week wise days + resources
  2. table-data in same nnumbers of columns...

    for img - http://i.stack.imgur.com/gwvoq.png

the assign task button in every cell of table-data , need , whent click button, pop-up window(kendowindow m using right in javascript preferably) should display respective cell row's 1st cell i.e resource's name , id , cell column's 1st cell i.e. date string.

please suggest solutions.... kindly appreciated.

p.s. -- please don't suggest kendo grid or scheduler, because can't able produce kind of format, if can pls share code , procedure.

you jquery: jsfiddle demo

<script>  $(document).ready(function() {     $('.assign').on("click", function(e){         e.preventdefault();          var $idx = $(this).parent().index(); // index         var $th = $('table th'); // table heading         var $date = $th.eq($idx).text();  // date index         var $resource = $(this).parents('tr').find("td:first-child").text(); // find first td in tr resource name.          // append date , resource paragraph tag.         $('.result').text("date : " + $date + " : " + $resource);    });  }); </script> 

html:

<table>     <tr>         <th>date 1</th>         <th>date 2</th>         <th>date 3</th>         <th>date 4</th>         <th>date 5</th>         <th>date 6</th>     </tr>     <tr>         <td>name 1</td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>     </tr>     <tr>         <td>name 2</td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>     </tr>     <tr>         <td>name 3</td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>         <td><a href="#" class="assign">assign task</a></td>     </tr> </table>   <p class="result"></p> 

Comments

Popular posts from this blog

google api - Incomplete response from Gmail API threads.list -

Installing Android SQLite Asset Helper -

Qt Creator - Searching files with Locator including folder -