Call next td using Jquery

Question

I having table trying to get the next column value using jQuery but it's always showing blank. Here is my code

<table>
  <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel('BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table>
<script>
function download_excel(a,b,c){
 text =  $(this).parent().next('td').text();
  alert(text);
}
</script>

function download_excel(a,b,c){
  text =  $(this).parent().next('td').text();
  alert(text);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel('BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table>

Any suggestions ?

Possible duplicate of [how to pass this element to javascript onclick function and add a class to that clicked element](https://stackoverflow.com/questions/19998711/how-to-pass-this-element-to-javascript-onclick-function-and-add-a-class-to-that) — Mohammad, Oct 20 '18 at 10:40

score 1 · Accepted Answer · edited Oct 20 '18 at 10:46

The problem with $(this) .. $(this) in your function not refer to the element you want so you can add el download_excel(el , a,b,c) and change $(this) to $(el) then use onclick="download_excel(this , 'BL8','ATR','AWFR')"

function download_excel(el,a,b,c){
     text =  $(el).parent().next('td').text();
      alert(text);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;">
        <td style="padding-left: 5px;">
            <a style="cursor: pointer;" onclick="download_excel(this , 'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a>
        </td>
        <td>14</td>
        <td>0</td>
        <td>56</td>
        <td>56</td>
    </tr>
</table>

Is it not possible to handle inside the function without changing the html code ? — Raman Singh, Oct 20 '18 at 10:40
@RamanSingh what I know it's not possible .. maybe someone have another idea — Mohamed-Yousef, Oct 20 '18 at 10:45

Mamun · Answer 2 · 2018-10-20T10:45:44.860

1

Currently this is referring to the window object.

You have to pass this to the function so that you can refer that as the currently clicked element inside the function:

function download_excel(el, a,b,c){
 text =  $(el).parent().next('td').text();
  console.log(text);
  console.log(this.constructor.name); // window
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr style="color: rgb(31, 73, 125); background-color: #eaeaea;"><td style="padding-left: 5px;"><a style="cursor: pointer;" onclick="download_excel(this, 'BL8','ATR','AWFR')">ATR-ADM-BLCMA8-CHN18-03-01-D</a></td><td>14</td><td>0</td><td>56</td><td>56</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table>

edited Oct 20 '18 at 10:45

answered Oct 20 '18 at 10:40

Mamun

66,969
9
47
59

thnx :) same question : Is it not possible to handle inside the function without changing the html code ? – Raman Singh Oct 20 '18 at 10:52
@RamanSingh, you can target `a` but if there is multiple `a` element, the solution will not work....say, you have another identical `tr` element then how you determine which `td` to get......thanks. – Mamun Oct 20 '18 at 10:59
thnx we have multiple tr with identical attribute except value.. will change the html code only :) – Raman Singh Oct 20 '18 at 11:06
@RamanSingh, if the value is different then you check the value to target the element......again the best solution is to pass `this`.......thanks. – Mamun Oct 20 '18 at 11:10
ya value will be different but it would be dynamic, we can't guess it during load, anyway thanks for help – Raman Singh Oct 20 '18 at 11:13
Is possible help me this question too.. can we do like this to set color for all tr $(element).parents('table').prevAll("tr").css("background-color", "#f3f3f3") ? – Raman Singh Oct 20 '18 at 11:13
@RamanSingh, it is not clear what you want from the selector......because there is nothing to select with `prevAll("tr")` on `table`... .may be you can update the question with what you want.... – Mamun Oct 20 '18 at 11:20
i want to change the color of all tr inside if we click on any td element, i used this one $(element).parents('table').children('tr').css("background-color", "#fbfbfb"); but no success :( – Raman Singh Oct 20 '18 at 11:22
`all tr inside if we click on any td element`......I am not clear......`all tr inside` of what? Do you mean the parent `tr` of currently clicked element?.......Again it is better to update the question with the new updates.......thanks. – Mamun Oct 20 '18 at 11:28
all tr inside -- Table.. but if we update the question then the below answers would n't make any sense..that's y no updating it – Raman Singh Oct 20 '18 at 11:32
@RamanSingh, say, there are 100 rows in a table, why do you change all the rows background color on clicking on a single rows `td > a`? This does not make sense to me.......thanks. – Mamun Oct 20 '18 at 12:02
Because i want to highlight the clicked one(already have code), rest i want to reset to previous background color.. that's y – Raman Singh Oct 20 '18 at 12:05

Call next td using Jquery

2 Answers2