单击具有特定单元格数据引用的表时转到特定动态 url - Jquery

Question

我有一个 html 表，如下所示，

+-------+-------+-------+-------+-------+---------+---------+---------+---------+
| 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 |
+---------------+-------+-------+-------+---------+---------+---------+---------+

第 6-9 列包含具有相应名称和 ID 的按钮，如图所示。

我想要的是，

当用户点击第 1 行中的 but 1 时，页面应该转到 url www.example.com/sample.php?but1=data1 ，并且当用户点击第 1 行中的 but 1 时第 2 行，页面应转到 URL www.example.com/sample.php?but1=data6。 同样，按钮 2、3 和 4 应将页面重定向到 www.example.com/sample2.php?but1=data1、www.example.com/sample3.php?but1= data1、第 1 行中的 www.example.com/sample4.php?but1=data1 和 www.example.com/sample2.php?but1=data6 、www.example.com/sample3.php?but1=data6 和 www.example.com/sample4.php?but1=data6 在第 2 行。

我怎样才能使用 jquery 使这成为可能？

该表包含的行数比此处显示的行数多。

这是我的表，

<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>

按钮单元格是用指针光标修改的表单元格;)

url 分布应该是这样的；

第一行
按钮1：www.example.com/1111.php?aa=data1
按钮2：www.example2.com/2222.php?bb=data1
按钮3：www.example3.com/3333.php?cc=data1
Button4：www.example4.com/4444.php?dd=data1

第二行
按钮1：www.example.com/1111.php?aa=data6
按钮2：www.example2.com/2222.php?bb=data6
按钮3：www.example3.com/3333.php?cc=data6
button4: www.example4.com/4444.php?dd=data6

我需要这样的代码；

    <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>

提前致谢..:)

Blaserafred

Answer 1

将其放入 JavaScript 文件中

$(function () {
    $("#myUniqueTable input[type=button]").click(function () {
         tdValue= $(this).parents('tr').find('td').eq(0).text() ;
         columnIndex = $(this).parents('tr').find('td').index(this)
         url= 'www.example.com/sample'+columnIndex +'.php?but1='+tdValue    
        $(location).attr('href',url);
    }
});

Answer 2

你可以这样做：

1. 根据单元格的列/行命名你的单元格 ID，例如 ...
2. 使用委托处理程序该表
3. 代码中检索行号和列号
4. 从单元格的 ID重定向

：

 $('#yourtable').delegate( "td", "click", function() {

        var id = $(this).attr( "id" );

        // There're far better ways to get those number with regex or whatever
        var pos = id.split('myTable')[1]; 
        var col = parseInt( pos.split('-')[0] );
        var row = parseInt( pos.split('-')[1] );

        // Now you have the col and row numbers of the clicked cell, 
        // you can generate your url and open it as needed

    } );

Answer 3

最后我解决了。。
首先，我感谢 Vivek、Prescott、JustcallmeDrago、BiAiB 和 Gordon。 .. :) 谢谢大家..

我成功了

<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>