Question

我有一张这样的表：

<table>
<tr id="green-row" class="green"><td></td></tr>
<tr id="red-row" class="red"><td></td></tr>
<tr id="blue-row" class="blue"><td></td></tr>
</table>

然后我在同一页面上有按钮（但与表格分开），如下所示：

<button id="add-green" class="green">Add Green Product</button>
<button id="add-red" class="red">Add Red Product</button>
<button id="add-blue" class="blue">Add Blue Product</button>

有没有办法让每个按钮上的操作对应于其关联的表格行，而不必每次都使用特定的ID？

例如，我知道我可以这样做：

$('#add-green').click(function() {
   $('#green-row td').append('<p>Added Green Product</p>')
});

但是，不是必须为每个产品写三次，是否有一种更简单的方法来链接＆＃34;表格行和按钮与同一个类或者rel或者什么东西一起？（正如你所见，我是jquery的新手。）

小提琴：http://jsfiddle.net/mqp5ev2p/3/

Answer 1

刚刚更新了你的小提琴Fiddle：

$('button').click(function() {
  var col = $(this).attr("class");
  var colcopy = $(this).text();
  $("td." + col).append(colcopy);
});

为按钮和td添加了红色，蓝色和绿色等级。认为你可以进一步调整它。

Answer 2

这将适用于您的具体情况

$('button[id^="add"]').click(function(){
    var idPart = $(this).attr('id').split('-')[1];
    $('tr[id^="'+idPart+'"] td').append('<p>Added '+ idPart+' Product</p>');
})

DEMO

它将添加为Added red Product如果您想要以大写字母开头的颜色名称。使用此行

$('tr[id^="'+idPart+'"] td').append('<p>Added '+ idPart.charAt(0).toUpperCase() + idPart.slice(1) +' Product</p>');

Answer 3

这是我的帮助

<table id="mytable">
    <tr data-relation="green"><td></td></tr>
    <tr data-relation="red"><td></td></tr>
    <tr data-relation="blue"><td></td></tr>
</table>

<button class="mybtn" data-relation="green">Add Green Product</button>
<button class="mybtn" data-relation="red">Add Red Product</button>
<button class="mybtn" data-relation="blue">Add Blue Product</button>

<script type="text/javascript">
$(document).ready(function(){
    $(".mybtn").click(function(){
        var selected = $(this).attr("data-relation");
        var valuetoappend = $(this).html();
        $("#mytable tr").each(function(){
            var relation = $(this).attr("data-relation");
            if(selected===relation)
                $(this).next().append(valuetoappend);
        });
    });
});
</script>

你如何将两个元素与jquery关联/链接？

3 个答案: