2015-01-01 1 views
-3

주어진 값에서 무작위 값을 한 번 눌러 옆에있는 버튼의 값을 변경할 수 있습니까? 다른 버튼 옆에있는 버튼 값을 변경할 수 없습니다. - Javascript - JQuery

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

http://jsfiddle.net/ehcfqm22/

나는 현재 버튼의 가치를 얻을 수 있어요하지만 그것에 대해입니다.

+0

변경하려는 내용이 명확하지 않습니다. 당신의 목표를 명확하게 기술하십시오. –

답변

0

예를 들어 다음 버튼의 값을 변경할 수 있습니다. 예 : 추가 중 사용자의 기능에 추가 할

$(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>

업데이트의 : 이전 불분명 한 요구 사항에 대한 그뿐만 아니라 다음 및/또는 이전 버튼의 값이 변경되어야합니다. ED 아니라 다음 Fiddle

조정 조정 상하 버튼의 값, 상기 클릭 버튼의 셀 행의 인덱스/수를 얻기 위해, 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 클릭. 이 버전의 경우). 위의 표는 잘못된 마크 업 (빈 행, 여러 빈 테이블을) 포함으로

, 조각과 두 번째 종류로 정리 코드 : 내가 제대로 질문을 이해하면

$(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>

+0

완벽하게 작동합니다! 그 위에있는 버튼 (예 : 20)을 변경하려면 수동으로해야합니까? – Ace

+0

@Ace Glad는 당신을 도왔습니다.당신이 "그 옆에있는 버튼"을 썼을 때 당신은 한번에 여러 개의 버튼을 의미한다는 것이 명확하지 않았습니다. 당신이 원하는 바를 질문으로 업데이트 할 수 있습니까? 예 : 모든 주변 버튼 (3,7,9,12,13)의 값을 변경하려면 8을 클릭해야합니까? –

+0

나는 그것이 같은 원칙을 가지고있을 거라고 생각했기 때문에 : x 미안하지만 그래, 그게 내가 원했던거야 :) – Ace

0

, 버튼을 누르면 그 옆에있는 버튼 텍스트가 바뀌어야합니다. 그렇다면이 작업은 작동합니다.

$(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>

관련 문제