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

【问题标题】：Set OnClick attribute of an input with TR data-key and TD cell value when select a table row选择表格行时，使用 TR 数据键和 TD 单元格值设置输入的 OnClick 属性
【发布时间】：2017-06-02 19:59:51
【问题描述】：

我在这方面发疯了。

当我选择行时，我有一个表并分配了一个类 (selected)。

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

这 2 个变量是我从所选行中提取的。

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

我的 OnClick 应该如下所示：

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

我的意图是：

点击表格行，分配类'selected'并将具有类'selected'（作为value1）和TD单元格值（作为value2）的TR元素的数据键属性放入我的OnClick字符串中。

点击的东西有效，但我无法让字符串工作。

我这里有个小提琴：fiddle

【问题讨论】：

您的 onclick 未更新为 "test.phtml?GetID=1&GetName=Name1" 对吗？
是的，正确的。它没有捕获 TR 数据键属性而不是第二个单元格值，也没有构建这个 OnClick 字符串。

标签： javascript jquery html onclick

【解决方案1】：

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

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());
});

【讨论】：

我必须添加 location.href 并在位置前后添加一些额外的单引号以使其正常工作，这看起来不错:) 谢谢。我现在的代码： $('.mybtn').attr('OnClick','location.href='+"'"+'./mysite.html?GetID ='+$(this).attr('data- key')+'& GetName ='+$(this).find('td:nth-child(2)').text()+"'");

【解决方案2】：

您在 $("#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>

【讨论】：