无法更改另一个按钮旁边的按钮值 - Javascript - JQuery

Question

是否可以从给定的 25 中按一次随机值并更改旁边按钮的值？

$(document).on('click', '#table input',function () {
    var value1 = "";
    value1 = $(this).val();
});

我能够获取当前按钮值，仅此而已。

Answer 1

您可以更改下一步按钮的值，例如添加

$(this).parent("td").next("td").find("input").val(value1);

你的功能。

我已经添加到你的 Fiddle

对于上一个按钮，它是

$(this).parent("td").prev("td").find("input").val(value1);

$(document).on('click', '#table input', function () {
    var value1 = "";
    value1 = $(this).val();
    $(this).parent("td").next("td").find("input").val(value1);
});
for (a = 1; a <= 25; a++) {
    var makeTable = false
    if (!makeTable) {
        $('#table').append('<table>');
    }
    $('#table').append('<tr>');
    for (i = 1; i <= 5; i++) {
        $('#table').append('<td>' + '<input type="button" class="numVa" value="' + a + '">' + '</td>');
        a++;
    }
    a--;
    $('#table').append('</tr>');
}
$('#table').append('</table>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="table"></div>

更新：针对之前不明确的要求不仅要修改下一个and/or上一个按钮的值，还要修改上面和上面按钮的值下面，调整后 Fiddle

调整如下：为了获取点击按钮的单元格和行的index/number，使用index()：

var bCell = $(this).parent("td");
var bRow = bCell.parent("tr");
var bCellNr = bCell.parent("tr").children().index(bCell);
var bRowNr = $("#table tr").index(bRow);

然后为后面 (bRowNr + 1) 行和前面 (bRowNr - 1) 行中具有相同索引的按钮设置值：

$("#table tr:eq(" + (bRowNr + 1) + ") td:eq(" + bCellNr + " ), 
  #table tr:eq(" + (bRowNr - 1) + ") td:eq(" + bCellNr + " )")
  .find("input").val(value1);

万一底行的按钮应该改变值万一单击第一行的按钮或

$("#table tr:eq(" + (bRowNr + 1) + ") td:eq(" + bCellNr + " )")
   .find("input").val(value1);

if(bRowNr > 0)
{
  $("#table tr:eq(" + (bRowNr - 1) + ") td:eq(" + bCellNr + " )")
    .find("input").val(value1);
}

如果单击第一行中的按钮不应更改最后一行按钮值（Fiddle。对于此版本）。

由于之前的 table 包含错误标记（空行，多个空 tables），清理后的代码以第二个变体为片段：

$(document).on('click', '#table input', function () {
    var value1 = "";
    value1 = $(this).val();
    $(this).parent("td").prev("td").find("input").val(value1);
    $(this).parent("td").next("td").find("input").val(value1);
    var bCell = $(this).parent("td");
    var bRow = bCell.parent("tr");
    var bCellNr = bCell.parent("tr").children().index(bCell);
    var bRowNr = $("#table tr").index(bRow);
    $("#table tr:eq(" + (bRowNr + 1) + ") td:eq(" + bCellNr + " )").find("input").val(value1);
    if (bRowNr > 0) {
        $("#table tr:eq(" + (bRowNr - 1) + ") td:eq(" + bCellNr + " )").find("input").val(value1);
    }
});
for (a = 1; a <= 25; a++) {
    $tr = $("<tr>");
    for (i = 1; i <= 5; i++) {
        $tr.append('<td>' + '<input type="button" class="numVa" value="' + a + '">' + '</td>');
        a++;
    }
    a--;
    $('#table').append($tr);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="table"></div>

Answer 2

如果我对你的问题的理解正确，按下一个按钮应该会改变旁边按钮的文本，如果是这样，这会起作用

$(document).on('click', '#table input',function () {
  $(this).next("input[type='button']").val('i\'ve been changed by the '+$(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table"><input type="button" value="first button"/><input type="button" value="second button"/><input type="button" value="third button"/><div>

无法更改另一个按钮旁边的按钮值 - Javascript - JQuery

Unable to change the button value next to another button - Javascript - JQuery

javascript

jquery