Html Table with javascript -
i have 2 tables different table-id in html, follows -
- table-header - consists of dynamic week wise days + resources
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
Post a Comment