Popular Content

Showing most liked content since 04/26/2016 in all areas

  1. 2 likes
    Like astralaaron said using closest class and the index class in jquery you can get the index of the tr, have a look at the fiddle. https://jsfiddle.net/8hL46ftj/ hope this helps $('img').click(function(){ alert($(this).closest('tr').index()) })
  2. 1 like
    When you're printing each field you can check if the field ID exists in $non_matches, and style the element appropriately. I'm just suggesting that it is more efficient to print everything correct in the first place, versus printing everything then trying to run client-side code to show errors or whatever else.
  3. 1 like
    It really depends on the users browser setting for pdf file type, most browsers by default will use pdf browser plugin specifically for viewing in browser, but if the user changes from default to use browser plugin, to 'always ask' it will show 'download' or 'open with' which could be browser plugin or operating system Adobe reader program. Since it depends on browser settings, you can still use open pdf directly in browser php script for browsers using pdf plugin, then they will presented with alternative to 'save' or 'open with' with an alternative pdf application option. Note: the 'downloaded' part file can be called anything' even original filename, it just renames filename to 'downloaded.pdf' even if original filename was 'test.pdf'.
  4. 1 like
    The form attribute only applies to form control elements. It doesn't exist on elements like <div> or <p>. What kind of element are you referring to when you say "non-form element"? This is regarding the form attribute from the MDN page for the <input> element: When the element is a descendant of a <form> element the form attribute is not needed. If the element is not inside a <form> then the form attribute will indicate which form the element belongs to so that when the form is submitted the element's value is added to the data that is sent. I'm not certain how fieldset elements behave, I would guess that the fieldset's children would belong to the same form that the fieldset belongs to, but it can be easily confirmed with an experiment. Experiments can be done with the form attribute by submitting the form and seeing which values get sent to the server. My guess before doing experiments is that a child of one form that has a form attribute from a different form will be added as a value when either of the two forms are submitted.
  5. 1 like
    You can use scandir() to list files in a directory and generate the HTML for the images. The line breaks exist, but HTML doesn't render line breaks unless you specifically put a <br> element. You can use nl2br() to show line breaks in the text provided by users. You can't choose the size of a file, but you can give a size limit in the file uploader. There are plenty of PHP file upload tutorials, you should look at some of them. The W3Schools tutorial has sections explaining how to limit the file size and file type. You can use str_replace() to change substrings into something else, such as in the following example: <?php $string = str_replace(':)', '<img src="smiley.gif">', $string); ?>
  6. 1 like
    Store the completed state of the form in the session, then check whether the session value is set before showing the panel. You can do this in Javascript with localStorage, sessionStorage or cookies. You can do it in PHP using sessions or cookies.
  7. 1 like
    Are you running the first cron job with the colons? /usr/local/cpanel/bin/jailshell: -c: /home/my_username/public_html/folder/file.php" Try removing the colons and also the double quote at the ends of the cron jobs.
  8. 1 like
    If they are child element of parent div, you need to add space before child elements. $( id + 'textarea') will look for an element with id '#letter_abstracttextarea' $( id + ' textarea') = '#letter_abstract textarea' will look for child textarea element whose parent element has this specific id.
  9. 1 like
    Depending IF the poster is already using jquery as all i see is plain vanilla JavaScript code, that would overkill just for one small line of code.
  10. 1 like
    Also, you're never going to see a request in the network console because you're not sending the file over the network, everything is being done in the browser. You're reading the local file and updating the page, not sending it to a server. That's why there's no request to a server.
  11. 1 like
    You can store anything in a PHP session. https://www.w3schools.com/php/php_sessions.asp
  12. 1 like
    IF you stringify the array you will simply get [ "AAAAAA" ] for single array value [ "AAAAAA","BBBBBB" ] for two array values, JSON.stringify(lsData) converts to ' [ "AAAAAA","BBBBBB" ] '. While when you use lsData = JSON.parse(localStorage.getItem("desSet"));it converts it back to a readable array of values with lsData[0] equallying "AAAAAA" and lsData[1] equallying "BBBBBB", that is what the loop does starting from 0 to less than total number of values (2) meaning 1.
  13. 1 like
    function lsCheck() { //Array to store Multiple values lsData = []; // if localstorage of desSet exists if (localStorage.desSet) { //get array stored in storage and apply to lsData, what was in storage is also in lsData now lsData = JSON.parse(localStorage.getItem("desSet")); //loop through array values creating elements for hold array content for (i = 0; i < lsData.length; i++) { var container = document.createElement("div"); container.className = "img_descrip_wrap"; //description var valDes = lsData[i] var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.appendChild(tex); container.appendChild(des); document.body.appendChild(container); } } } //At the end of btn click function after appending new image and paragraph you have these values push into array (along with values from localstorage if exits which would have been populated by onload function) document.getElementById('btn').onclick = function() { //image var container = document.createElement("div"); container.className = "img_descrip_wrap"; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.appendChild(tex); container.appendChild(des); document.body.appendChild(container); // push (append) current value description input into array lsData.push(valDes); // apply the whole array to localstorage localStorage.setItem("desSet", JSON.stringify(lsData)); }; NOTE: this applies only to description value, and this has not been tested
  14. 1 like
    Use different id for second and just use same code to add content OR use classname instead and use var parentClass=document.getElementsByClassName("timeleftpay"); for(var i=0;i<parentClass.length;i++){ parentClass[i].innerHTML = dy + dytext + hr + hrtext + min + mintext + sec + sectext + eventtext; } Use <span class="timeleftpay"> </span>
  15. 1 like
  16. 1 like
    function myFunction(elem) { elem.nextElementSibling.classList.toggle("show"); var myDropdown = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < myDropdown.length; i++) { if (myDropdown[i].classList.contains('show')) { if (elem.nextElementSibling !== myDropdown[i]) { myDropdown[i].classList.remove('show'); } } } } BUT! you do realise, the window onclick example (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown) does not work in MS Edge, its so good of w3schools to give you an example that does not work in MS Edge and not tell you.
  17. 1 like
    I use Netbeans, because its not limited to just 1 or two server languages, but several, including frameworks Zend, smarty, Laravel, Java etc, It gives you traffic light indication to highlight errors in red and warnings in amber, it gives hints, in indicates what closing braces elements belong to. There is also Sublime, but I found Netbeans gives me what I want, and the ability to add more if I want.
  18. 1 like
    If you're sending string values in the URL then you'll also want to use the encodeURIComponent function to make sure the values don't break the URL. Otherwise, if you're sending a lot of data you'll probably want to just switch to a post request instead of a get request.
  19. 1 like
    Misplaced ',' instead of ' ' in margin styling, and ending semi-colon ';' for 'src = val' document.getElementById('btn').onclick = function() { var container = document.createElement("div"); container.style.maxWidth = "270px"; /* just for testing purposes dsonesuk*/ container.style.backgroundColor = "red"; /* just for testing purposes dsonesuk*/ container.style.display = "inline-block"; /* just for testing purposes dsonesuk*/ container.style.verticalAlign = "top"; /* just for testing purposes dsonesuk*/ //image var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val; /* replaced ',' with ';' dsonesuk */ img.src = src; //document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; //img.style.float = "left"; img.style.margin = "0px 50px"; /* removed ',' dsonesuk*/ //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.style.display = 'block'; des.style.backgroundColor = "green"; /* just for testing purposes dsonesuk*/ /* des.style.top = '0px'; des.style.left = '0px'; removed because obsolete without position used dsonesuk*/ des.style.height = "160px"; des.style.padding = "10px"; des.appendChild(tex); //also tried tex.appendChild(des); container.appendChild(img); container.appendChild(des); //container.appendChild(tex); also tried this document.body.appendChild(container); }; With css and class Name <style type="text/css"> .img_descrip_wrap { display: inline-block; max-width: 270px; vertical-align: top; } .img_descrip_wrap img {width:150px; height: 150px; padding:10px; margin: 0 50px; display: block;} </style> document.getElementById('btn').onclick = function() { //image var container = document.createElement("div"); container.className = "img_descrip_wrap"; var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val; img.src = src; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.appendChild(tex); container.appendChild(img); container.appendChild(des); document.body.appendChild(container); };
  20. 1 like
    IF you are talking about multiple selection dropdown the value would contain 'Griffin,Swanson,Quagmire', so you would not need to change JavaScript, only the php side to split those names from $_GET['q'] For passing second variable, you have to run a function to retrieve the two values and apply to variables 'str' sames as before, and lets say 'home', then in ajax querystring xmlhttp.open("GET","getuser.php?q="+str+"&hometown="+home,true); Then in php $homeTown = strval($_GET['hometown']);
  21. 1 like
    Here's how you created nested elements: /* Create a container */ var container = document.createElement("div"); /* Create children */ var image = document.createElement("img"); //... Set attributes var paragraph = document.createElement("p"); // ... Set attributes and content /* Add children to the container */ container.appendChild(image); container.appendChild(paragraph); /* Add the container to the body */ document.body.appendChild(container);
  22. 1 like
    Sure, you can do all of the layout math yourself that the browser would normally do when it positions elements. You can decide how large you want each thing to be, how much spacing between them, how large the canvas is, etc, and figure out the coordinates to draw everything. If you want to lay out everything yourself on a canvas then you can do that, you just need to do all of the math that the browser would normally do for you. If you want a border around the image and caption, for example, then you need to decide how thick the border is and account for that space, any space between the border and the inner contents, etc. The same thing goes for text, if you want the text to wrap to the next line then it's your responsibility to figure out how many pixels long the text is and where to wrap it, there's a description about that here. When you draw on a canvas you're not using CSS to position things on the canvas and then having the browser lay it all out, you're doing all of that manually and just telling the browser the coordinates to draw everything. Anyway, that's why I was wondering why you're using a canvas instead of just creating the div and img tags and adding them to the document, where the browser will handle layout, position, wrapping, etc.
  23. 1 like
    You should get in the habit of structuring your code like Ingolme mentions. Put your PHP code first that will decide what the page is even going to do, and output HTML and whatever later on. If you're just going to redirect there's no reason to output a bunch of HTML anyway, right? So figure out first if you're going to redirect or show HTML or whatever else, and then do that.
  24. 1 like
    You should have the PHP run first, then the HTML. Here's the general structure of my PHP applications: <?php // Form handling logic if(isset($_POST['submit')) { // If submission was successful // Do something header('Location: http://www.example.com/target.php'); exit; } // Set variables for use in templates $template = 5; // Include a template file include 'template.php'; ?>
  25. 1 like
    <?php session_start(); //start the session for the page include("../include/db.php"); //include database file include("../include/settings.php"); //include configuration file //Check if page was entered by a submit button $email=$_POST['email']; //Get username !!FROM FORM!! $email = ereg_replace(" ", "", $email); //take away all spaces from username (if any) !!FROM FORM!! $password=base64_encode($_POST['password']); //Get name !!FROMFORM!! if (empty($email) || empty($password)) { echo "Empty fields";} else{ //check to see if the username or email allready excists $ck=$flash->prepare("SELECT * FROM `user` WHERE `email`=:email AND `password`=:password "); //get rows where the username or email address is allready registered $ck->bindParam(':email',$email); $ck->bindParam(':password',$password); $ck->execute(); //if email address allready excists if($ck->rowCount() > 0){ echo "user loged in successfully"; } else{ echo "Login or password inccorect";} } ?> use that phpand keep the alert(result); it should be clear now
  26. 1 like
    You can store the query results in a multidimensional array check this https://www.w3schools.com/php/func_array.asp "example 4" you can then return the array .
  27. 1 like
    Use block elements, or turn them into block elements using display: block; or display: inline-block;
  28. 1 like
    Any inline element, or block element using display: inline; turning it into a inline element will not respond to width, height applied, its width will be determined by content within it.
  29. 1 like
    header > h1, header > p{ color:red; } /*OR*/ header > h1, header > h1 + p{ color:red; } /*Give header class name */ .colour_version01 {color:red;} <header class="colour_version01"> <h1>Some text</h1> <p>Some more text</p> </header>
  30. 1 like
    That would be fine if you were coding for a website, but HTML emails need to be simple. if you want it random, you'll have to create several different images with the pictures in different orders.
  31. 1 like
    Then all you require is to have images with the rank name that matches the written rank, then using same principle you just supply image path which can be set to a constant variable and then the img file extension. You probably need to be more specific on the img element targeted, but you could use 'fruits' class name index, to target a class name given to the rank img index ref.
  32. 1 like
    If you check the network tab of your browser's developer tools, each time you click a color you'll see a request go out for an image. Here's one of them. http://hanes.scene7.com/is/image/Hanesbrands/HNS_HO5944_ChiliPepperHeather?defaultImage=Hanesbrands/HNS_HO5944_AwesomeBlueHeather&id=Cd9S33&wid=490&hei=622&fmt=jpg
  33. 1 like
    Instead of individual ref for each, use the actual innerhtml text as the complete src ref $(this).next('img').attr('src', "http://placehold.it/400x150?text=" + $(this).html()); Equals repeating duplicate of text in src of image Equals the value that defines the complete src reference <span class="fruit">apple</span> <img src=""> <span class="fruit">orange</span> <img src=""> <script type="text/javascript"> $(function() { $('.fruit').each(function(i) { $(this).next('img').attr('src', "http://placehold.it/400x150?text=" + $(this).html()); /* if (document.getElementById("fruit").textContent == "orange") { document.getElementById("img").src = "http://placehold.it/400x150?text=orange"; } else if (document.getElementById("fruit").textContent == "apple") { document.getElementById("img").src = "http://placehold.it/400x150?text=apple"; } else if (document.getElementById("fruit").textContent == "pear") { document.getElementById("img").src = "http://placehold.it/400x150?text=pear"; }*/ }); }); </script>
  34. 1 like
    An id reference must be unique within a page, only class names can be used multiple times, so you would have to loop through classnames and make changes to next sibling img src attribute.
  35. 1 like
    You can't have block element within paragraph, move opening p tag under h2 tag. It probably corrected by adding closing tag after opening tag, which means no opening tag for ending closing p tag.
  36. 1 like
    Then you would have to make tmp duplicate array, of the array of ordered selected items, loop though selected items from dropdown and if identical remove, you should end up with last item deselected. Then remove this item from original array of selected items. Use .indexOf() to find matching values.
  37. 1 like
    Use "==" for comparison. A single "=" is the assignment operator, which changes the value of the variable you're operating with. You can use a switch() statement as well to make your code more readable.
  38. 1 like
    Had to make slight change, correct invalid html, which you should validate at https://validator.w3.org/ before posting <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <style type="text/css"> #mydropdown option:hover { background: #c8c8c8; } #mydropdown option { padding: 5px; } .mydivs1 { display: none; } br { display: block; content: ""; margin-top: 5px; } .mydivs1 { border: 1px solid black; padding: 5px; height: 211px; width: 172px; margin-left: 5px; background-color: #ff8080; } .mydivs2 { border: 1px solid black; padding: 5px; height: 199px; width: 35px; float: left; background-color: #b3e6b3; } .mydivs3 { border: 1px solid black; height: 199px; width: 103px; margin-left: 52px; padding-left: 10px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; background-color: #cce6ff; } </style> </head> <body> <input type="text" id="mytextbox" placeholder="Search Foods"> <p></p> <select id="mydropdown" multiple="multiple"> <option value="optionx_Fruits">Fruits</option> <option value="optionx_Vegetables">Vegetables</option> <option value="optionx_Nuts">Nuts</option> <option value="optionx_Meats">Meats</option> </select> <p></p> Results: <p></p> <div id="results"> <div class="mydivs1" id="optionx_Fruits"> <!--match="optionx Fruits"--> <div class="mydivs2"> <button class="button1">X</button> <p style="clear:both"></p> <button class="button2">C</button> </div> <div class="mydivs3"> <span class="myspan1">Fruits</span> <p></p> <span class="myspan2">1:</span> <br> <span class="myspan3">Avocados</span> <p></p> <span class="myspan2">2:</span> <br> <span class="myspan3">Blackberries</span> <p></p> <span class="myspan2">3:</span> <BR> <span class="myspan3">Raspberries</span> </div> <p></p> </div> <p></p> <div class="mydivs1" id="optionx_Vegetables"> <!--match="optionx Vegetables"--> <div class="mydivs2"> <button class="button1">X</button> <p style="clear:both"></p> <button class="button2">C</button> </div> <div class="mydivs3"> <span class="myspan1">Vegetables</span> <p></p> <span class="myspan2">1:</span> <br> <span class="myspan3">Beets</span> <p></p> <span class="myspan2">2:</span> <br> <span class="myspan3">Eggplants</span> <p></p> <span class="myspan2">3:</span> <BR> <span class="myspan3">Spinach</span> </div> <p></p> </div> <p></p> <div class="mydivs1" id="optionx_Nuts"> <!--match="optionx Nuts"--> <div class="mydivs2"> <button class="button1">X</button> <p style="clear:both"></p> <button class="button2">C</button> </div> <div class="mydivs3"> <span class="myspan1">Nuts</span> <p></p> <span class="myspan2">1:</span> <br> <span class="myspan3">Almonds</span> <p></p> <span class="myspan2">2:</span> <br> <span class="myspan3">Pecans</span> <p></p> <span class="myspan2">3:</span> <BR> <span class="myspan3">Walnuts</span> </div> <p></p> </div> <p></p> <div class="mydivs1" id="optionx_Meats"><!--match="optionx Meats"--> <div class="mydivs2"> <button class="button1">X</button> <p style="clear:both"></p> <button class="button2">C</button> </div> <div class="mydivs3"> <span class="myspan1">Meats</span> <p></p> <span class="myspan2">1:</span> <br> <span class="myspan3">Chicken</span> <p></p> <span class="myspan2">2:</span> <br> <span class="myspan3">Fish</span> <p></p> <span class="myspan2">3:</span> <BR> <span class="myspan3">Turkey</span> </div> <p></p> </div> </div> <p></p> <!-- Original script --> <script type="text/javascript"> /* jQuery.fn.filterByText = function(mytextbox) { return this.each(function() { var select = this; var options = []; $(mydropdown).find('option').each(function() { options.push({ value: $(this).val(), text: $(this).text() }); }); $(mydropdown).data('options', options); $(mytextbox).bind('change keyup', function() { var options = $(mydropdown).empty().data('options'); var search = $.trim($(this).val().replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")); var regex = new RegExp(search, "gi"); $.each(options, function(i) { var option = options[i]; if (option.text.match(regex) !== null) { $(mydropdown).append( $('<option>').text(option.text).val(option.value) ); } }); }); }); }; $(function() { $('#mydropdown').filterByText($('#mytextbox'), true); });*/ /* $(document).ready(function() { function exists(elemt, arr) { return (jQuery.inArray(elemt, arr) > -1); } $('#mydropdown').change(function() { var $selected = $(this).val(); $('.mydivs1').each(function() { $(this).toggle()[ (exists($(this).attr('match'), $selected)) ? 'show' : 'hide'](); }); }); });*/ </script> <!--NEW Script --> <script> var SelOrderArray = []; $('#mydropdown').on('change keyup', function() { $('.mydivs1').hide(); var $selected = $(this).val(); if ($selected.length > 0) { $.each($selected, function(i) { //loop through selected possible multiple selected options if (SelOrderArray.indexOf($selected[i]) === -1) { //if current looped through $selected value not in array then add to array SelOrderArray.push($selected[i]); } }); } else { SelOrderArray.push($selected[i]); } // loop through ordered array of slected options $.each(SelOrderArray, function(i) { //clone element with specific id to temp storage variable var TmpDivClone = $("#" + SelOrderArray[i]).clone(); //remove current existing element with specific id $("#" + SelOrderArray[i]).remove(); // prepend temp cloned element to div #result wrapping mydiv1 elements so prepending remains below dropdown and show TmpDivClone.prependTo('#results').show(); }); }); </script> </body> </html>
  39. 1 like
    There are three aspects to take into account in a web page: Content: HTML Presentation: CSS Behavior: Javascript The same way we want to separate content from presentation, we also want to separate content from behavior. Javascript should only be inside <script> elements, CSS should only be in <style> or <link> elements and HTML should not be polluted with attributes concerning behavior and presentation. You wouldn't use align and bgcolor attributes, so why would you use onclick attributes? In your original code, otherTongue is restricted to the local scope of the function it was declared in, it's not accessible from outside. That's why the onchange event attribute can't find it, the event attribute is looking for a global function.
  40. 1 like
    var SelOrderArray=[]; $.each($selected,function(i){ //loop through selected possible multiple selected options if(SelOrderArray.indexOf($selected[i]) === -1){ //if current looped through $selected value not in array then add to array SelOrderArray.push($selected[i]); } }); // loop through ordered array of slected options $.each(SelOrderArray,function(i){ //clone element with specific id to temp storage variable var TmpDivClone = $("#"+SelOrderArray[i]).clone(); //remove current existing element with specific id $("#"+SelOrderArray[i]).remove(); // prepend temp cloned element to div #result wrapping mydiv1 elements so prepending remains below dropdown and show TmpDivClone.prependTo('#result').show(); }); Not tested, written on tablet
  41. 1 like
    First of all you can't have multiple id references, or spaces within id value, and as id must be unique within a page, you have to clone a element with unique id and temporarily apply it to variable, then remove original, then prepend temporarily cloned to a surrounding container which would make it easy to control placement and order. But first you will need an array that will store id references, that do not currently exist, in order they were selected, then looping this array you can temp clone, remove original, prepend clone.
  42. 1 like
  43. 1 like
    Buttons are inline elements, so they need to be centered by setting text-align on the parent element.
  44. 1 like
    With the code I provided, it does not require being placed in function, it runs its own anonymous function if a specific classed element within a specific parent id element is clicked even if a specific currently classed element already exists OR is newly created which is what 'on()' is specifically used for.
  45. 1 like
    Events like these are applied to elements on loading of the page, if you place them in a function you apply the exactly the same event with same outcome again everytime the function is called, very inefficient, generally if these are placed in function you are doing it wrong. You don't even require the function, you just need to target the parent and then the newly created class references. function addFlowLine() { var table = document.getElementById("query_content_unexe"); var row = table.insertRow(0); row.insertCell(0).innerHTML = '<button class="up">up</button>'; row.insertCell(1).innerHTML = '<button class="down">down</button>'; row.insertCell(2).innerHTML = 'add'; } $("#unexe_table").on("click", ".up, .down", function() { var row = $(this).parents("tr:first"); if ($(this).is(".up")) { row.insertBefore(row.prev()); } else { row.insertAfter(row.next()); } });
  46. 1 like
    Hi Joymis, as Ingolme said the event is being added every time the new row is added. Here is the fix - https://jsfiddle.net/rockey91/8zzq635c/
  47. 1 like
    Every time you create a new row you're adding another event handler to all the rows. The newest row will have just one event handler, but the older rows will have as many event handlers as times you've clicked the "new" button.
  48. 1 like
    If you want to use a database as the data store then that's one route to take, but if the data is static then you could get away with a CSV file or something. You wouldn't even necessarily need to use a server-side language like PHP to build the table (although you could), you could just send an ajax request in Javascript to get the CSV file and parse it in Javascript and go through it to build the table dynamically. Once the table is built and on the page then you'll probably just want to use a jQuery plugin or something for sorting and filtering.
  49. 1 like
    You can also do this without jQuery using the rowIndex property of the table row element: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/rowIndex If you have a reference to the image, you can get to the table row using the parentNode property
  50. 1 like
    I would look into jquery's closest() function which will search up the dom until it finds what it is looking for. Once you found the tr I think you could use jquery's index() index function closest() https://api.jquery.com/closest/ index() https://api.jquery.com/index/