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

在具有特定单元格数据引用的表中单击时转到特定的动态url-Jquery,jquery,dynamic-data,response.redirect,Jquery,Dynamic Data,Response.redirect,我有一个如下所示的html表 +-------+-------+-------+-------+-------+---------+---------+---------+---------+ | col1 | col2 | col3 | col4 | col5 | col6 | col7 | col8 | col9 | +-------+-------+-------+-------+-------+---------+---------+---------+

我有一个如下所示的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
,当用户单击第2行中的but 1时,页面应转到url
www.example.com/sample.php?but1=data6
。 类似地,按钮2、3和4应该将页面重定向到第1行的
www.example.com/sample2.php?but1=data1
www.example.com/sample3.php?but1=data1
www.example.com/sample4.php?but1=data1
www.example.com/sample2.php?but1=data6
,第2行的
www.example.com/sample4.php?but1=data6

如何使用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>
提前感谢……)


blasteralfred将其放入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);
    }
});

您可以这样做:

  • 根据单元格的列/行命名单元格id,如
  • 在表上使用委托处理程序
  • 从单元格的id中检索行和列编号
  • 重定向
  • 代码:

    我终于解决了。。 首先,我要感谢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>
    
    
    $(函数(){
    $('.button1')。单击(函数(){
    window.location=“www.example.com/1111.php?aa=“+this.id;
    });
    $('.button2')。单击(函数(){
    window.location=“www.example2.com/2222.php?bb=“+this.id;
    });
    $('.button3')。单击(函数(){
    window.location=“www.example3.com/3333.php?cc=“+this.id;
    });
    $('.button4')。单击(函数(){
    window.location=“www.example4.com/4444.php?dd=“+this.id;
    });
    });
    
    我想他想添加第一个单元格数据。我已将我的表格添加到我的问题中。。看一看。。。。你能帮我把代码贴出来吗?你有你的解决方案吗?@blasteralfred-如果你修改了Vivek提供的代码,把#myUnqiueTable改为#mytable它应该可以工作。如果没有,请发布并让我们知道您的错误或您看到了什么。。什么也不做。。我需要像$(function(){$('.button1')。单击(function(){//转到第一个地址//});$('.button2')。单击(function(){//转到第二个地址//});$('.button3')。单击(function(){//转到第三个地址//});$('.button4')。单击(function(){//转到第四个地址//}););你至少应该对每个答案投赞成票……而且无论你现在更新了什么,都与你之前的问题完全不同……所以在发布问题之前,请确保你的疑问是明确的。。。
     $('#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
    
        } );
    
    <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>