选择表行时，使用TR数据键和TD单元格值设置输入的OnClick属性

Question

我对此很不满意。

我有一个表，并在选择行时分配一个类（ selected ）。

现在，我在表单中有一个输入，这是假设在OnClick时重定向到另一个页面，它也应该解析2个变量。

我从选定的行中获取这2个变量。

GetID是TD数据键属性， GetName是第二列单元格值。

我的OnClick应该看起来像这样：

onclick="location.href='test.phtml?GetID=1&GetName=Name1'"

我的意图是：

单击表行，分配类“ selected”，然后在我的OnClick字符串中放入TR元素的data-key属性，该元素具有类“ selected”（作为value1）和TD单元格值（作为value2）。

单击的东西工作，但我无法使字符串工作。

我在这里有一个小提琴： 小提琴

Answer 1

您在$（“＃myTable tbody tr”）。on（'click'

var str = "location.href='test.phtml?GetID='" + $(this).data('key') +
            "'&GetName='" + $(this).find('td:last').text();
$(':input[value="Next"]').attr('onclickLocation', str);

 $('#myTable').on('click', '.selected', function(event) { if ($(this).hasClass('bg-info')) { $(this).removeClass('bg-info'); } else { $(this).addClass('bg-info').siblings().removeClass('bg-info'); } }); $("#myTable tbody tr").on('click', function(AddGroupIDandName) { $(this).addClass('selected').siblings().removeClass("selected"); var str = "location.href='test.phtml?GetID='" + $(this).data('key') + "'&GetName='" + $(this).find('td:last').text(); $(':input[value="Next"]').attr('onclickLocation', str); console.log('onclick is: ' + str); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <div class="container-fluid"> <table class="table table-sm table-hover" id="myTable"> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <tr class="selected" data-key="1"> <td>1</td> <td>Name1</td> </tr> <tr class="selected" data-key="2"> <td>2</td> <td>Name2</td> </tr> <tr class="selected" data-key="3"> <td>3</td> <td>Name3</td> </tr> </tbody> </table> </div> <div class="container-fluid"> <form><input class="btn btn-sm btn-secondary" onclick="location.href='test.phtml?GetID=1&GetName=Name1'" type="button" value="Next" ></form> </div> 

Answer 2

你能检查一下这个方法吗：

https://jsfiddle.net/Kanzari/3sw01c9r/5/

这是您原始代码的定制分支，基本更改如下：

    $("#myTable tr").click(function(AddGroupIDandName) {
  $(this).addClass('selected').siblings().removeClass("selected");
    $('.mybtn').attr('OnClick','./mysite.html?GetID='+$(this).attr('data-key')+'&GetName='+$(this).find('td:last-child').text());
});