Question

I have an html table like below

+-------+-------+-------+-------+-------+---------+---------+---------+---------+
| col1  | col2  | col3  | col4  | col5  | col6    | col7    | col8    | col9    |
+-------+-------+-------+-------+-------+---------+---------+---------+---------+
| data1 | data2 | data3 | data4 | data5 | button1 | button2 | button3 | button4 |
+-------+---------------+-------+-------+---------+---------+---------+---------+
| data6 | data7 | data8 | data9 | data0 | button1 | button2 | button3 | button4 |
+---------------+-------+-------+-------+---------+---------+---------+---------+

columns 6-9 contains buttons with corresponding names and ids as shown.

What I want is,

When the user click but 1 in row 1, the page should go to a url www.example.com/sample.php?but1=data1 and when the user click but 1 in row 2, the page should go to a url www.example.com/sample.php?but1=data6.
similarly, the buttons 2, 3 and 4 should redirect the page to www.example.com/sample2.php?but1=data1, www.example.com/sample3.php?but1=data1, www.example.com/sample4.php?but1=data1 in row 1 and www.example.com/sample2.php?but1=data6, www.example.com/sample3.php?but1=data6, and www.example.com/sample4.php?but1=data6 in row 2.

How can I make this possible using jquery??

The table contains more rows than shown here..

Here is my table

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<table style="width: 100%" id="mytable" name="mytable">
    <tr>
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
        <td>col4</td>
        <td>col5</td>
        <td>col6</td>
        <td>col7</td>
        <td>col8</td>
        <td>col9</td>
    </tr>
    <tr>
        <td name="datacol" id="datacol">data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
        <td id="data1" class="button1" name="button1" style="cursor:pointer">button1</td>
        <td id="data1" class="button2" name="button2" style="cursor:pointer">button2</td>
        <td id="data1" class="button3" name="button3" style="cursor:pointer">button3</td>
        <td id="data1" class="button4" name="button4" style="cursor:pointer">button4</td>
    </tr>
    <tr>
        <td name="datacol" id="datacol">data6</td>
        <td>data7</td>
        <td>data8</td>
        <td>data9</td>
        <td>data10</td>
        <td id="data6" class="button1" name="button1" style="cursor:pointer">button1</td>
        <td id="data6" class="button2" name="button2" style="cursor:pointer">button2</td>
        <td id="data6" class="button3" name="button3" style="cursor:pointer">button3</td>
        <td id="data6" class="button4" name="button4" style="cursor:pointer">button4</td>
    </tr>
</table>

the button cells are modified table ells with pointer cursor 😉

the url distribution should be like;

first row
button1: www.example.com/1111.php?aa=data1
button2: www.example2.com/2222.php?bb=data1
button3: www.example3.com/3333.php?cc=data1
button4: www.example4.com/4444.php?dd=data1

second row
button1: www.example.com/1111.php?aa=data6
button2: www.example2.com/2222.php?bb=data6
button3: www.example3.com/3333.php?cc=data6
button4: www.example4.com/4444.php?dd=data6

I need a code like this;

    <script type="text/javascript">
    $(function() {
        $('.button1').click(function() {
   document.location.href='the_link_to_go_to.html';  
        });
        $('.button2').click(function() {
   document.location.href='the_link_to_go_to.html';    
        });
        $('.button3').click(function() {
   document.location.href='the_link_to_go_to.html';     
        });
        $('.button4').click(function() {
   document.location.href='the_link_to_go_to.html';     
        });
    });
    </script>

Thanks in advance.. 🙂

blasteralfred

Answer 1

Finally I solved it..
First of all I thank Vivek, Prescott, JustcallmeDrago, BiAiB and Gordon… 🙂 Thanks guyz..

I made it through

<script type="text/javascript">
$(function() {
    $('.button1').click(function() {
   window.location = "www.example.com/1111.php?aa=" + this.id;
    });
    $('.button2').click(function() {
   window.location = "www.example2.com/2222.php?bb=" + this.id;
    });
    $('.button3').click(function() {
   window.location = "www.example3.com/3333.php?cc=" + this.id;
    });
    $('.button4').click(function() {
   window.location = "www.example4.com/4444.php?dd=" + this.id;
    });
});
</script>