1. 홈
  2. 질의 응답
  3. 어떻게 동적으로 Rad 버튼 이름을 변경하십시오

어떻게 동적으로 Rad 버튼 이름을 변경하십시오

2016-07-04 5 views
1

사용자가 성별을 선택하는 작은 양식을 만들려고합니다. 추가 사용자를위한 새로운 라인을 만드는 스크립트가 있지만 문제는이 코드가 이전 요소를 복제하고 라디오 버튼 이름 속성이 성별 선택 이름을 사용할 수 없게 만들기 전과 동일하므로 라디오를 변경하는 방법이 있는지 확인하는 것입니다. 버튼은 새 행을 추가 할 때 이름을 지정하여 그룹이 이전 그룹 이름과 다를 수 있습니다. cloned 노드의 자식 요소 어떻게 동적으로 Rad 버튼 이름을 변경하십시오

function addRow() { 
 
    var radName = document.getElementsByName('gender2').value; 
 
    var table = document.getElementById('myTable'); 
 
    var row = document.getElementById('lastRow'); 
 
    var newRow = row.cloneNode(true); 
 
    table.appendChild(newRow); 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="tableDiv"> 
 

 
    <table id="myTable"> 
 
     <tr id="firstRow"> 
 
     <td>Surname</td> 
 
     <td>Forname(S)</td> 
 
     <td>Age</td> 
 
     <td>City</td> 
 
     <td class="gender">Male</td> 
 
     <td class="gender">Female</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <input placeholder="Surname" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Forename(S)" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Age" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="City" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender0" type="radio" value="Male" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender0" type="radio" value="Female" /> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <input placeholder="Surname" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Forename(S)" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Age" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="City" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender1" type="radio" value="Male" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender1" type="radio" value="Female" /> 
 
     </td> 
 
     </tr> 
 

 
     <tr id="lastRow"> 
 
     <td> 
 
      <input placeholder="Surname" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Forename(S)" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Age" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="City" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender2" type="radio" value="Male" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender2" type="radio" value="Female" /> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <input type="submit" id="buttonOne" onclick="addRow()" value="+" /> 
 
    </div> 
 
</body> 
 

 

 

 
</html>

는

출처

2016-07-04 Matti_Leeds

+0

당신이 행을 복제하기 때문에하는 id - y를 가지고있다. ou는 또한이 id를 복제하고 있습니다. 즉, 라디오 버튼으로 문제를 해결할 때 동일한 id를 가진 tr의 인스턴스가 여러 개 생성됩니다. 복제 할 항목이 무엇인지 알면 (즉, 테이블 행/셀 구조와 입력이 필요함), 새로운 ID/이름을 가진 행을 만들어 테이블에 추가하면 어떨까요? . 이렇게하면 새로운 tr을 만들 수 있고 필요한 입력을 tds 내에 넣을 수 있습니다. 그러면 고유 한 이름을 각 프로세스에 추가 할 수 있습니다. 추가 된 각각의 고유 한 ID는 – gavgrif

답변

4 

function addRow() { 
 
    var radName = document.getElementsByName('gender2').value; 
 
    var table = document.getElementById('myTable'); 
 
    var row = document.getElementById('lastRow'); 
 
    var newRow = row.cloneNode(true); 
 
    var index = --document.querySelectorAll('#myTable tr').length; 
 
    newRow.querySelector('[value="Male"]').name = 'gender' + index; 
 
    newRow.querySelector('[value="Male"]').name = 'gender' + index; 
 
    table.appendChild(newRow); 
 
}
<div id="tableDiv"> 
 
    <table id="myTable"> 
 
    <tr id="firstRow"> 
 
     <td>Surname</td> 
 
     <td>Forname(S)</td> 
 
     <td>Age</td> 
 
     <td>City</td> 
 
     <td class="gender">Male</td> 
 
     <td class="gender">Female</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input placeholder="Surname" /> 
 
     </td> 
 
     <td> 
 
     <input placeholder="Forename(S)" /> 
 
     </td> 
 
     <td> 
 
     <input placeholder="Age" /> 
 
     </td> 
 
     <td> 
 
     <input placeholder="City" /> 
 
     </td> 
 
     <td> 
 
     <input class="gender" name="gender0" type="radio" value="Male" /> 
 
     </td> 
 
     <td> 
 
     <input class="gender" name="gender0" type="radio" value="Female" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input placeholder="Surname" /> 
 
     </td> 
 
     <td> 
 
     <input placeholder="Forename(S)" /> 
 
     </td> 
 
     <td> 
 
     <input placeholder="Age" /> 
 
     </td> 
 
     <td> 
 
     <input placeholder="City" /> 
 
     </td> 
 
     <td> 
 
     <input class="gender" name="gender1" type="radio" value="Male" /> 
 
     </td> 
 
     <td> 
 
     <input class="gender" name="gender1" type="radio" value="Female" /> 
 
     </td> 
 
    </tr> 
 
    <tr id="lastRow"> 
 
     <td> 
 
     <input placeholder="Surname" /> 
 
     </td> 
 
     <td> 
 
     <input placeholder="Forename(S)" /> 
 
     </td> 
 
     <td> 
 
     <input placeholder="Age" /> 
 
     </td> 
 
     <td> 
 
     <input placeholder="City" /> 
 
     </td> 
 
     <td> 
 
     <input class="gender" name="gender2" type="radio" value="Male" /> 
 
     </td> 
 
     <td> 
 
     <input class="gender" name="gender2" type="radio" value="Female" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />

출처

2016-07-04 09:32:33 Rayon

1

당신은 라인을 복제하고 이름을 변경하려고해서는 안된다.

행에 대한 HTML 코드를 생성하고 올바른 이름을 직접 입력해야합니다. 여기

는 예를 조각입니다 : 

var idx = 0; 
 

 
window.onload = addRow; 
 

 
function addRow() { 
 
    var rowHTML = '<td><input placeholder="Surname" /></td><td><input placeholder="Forename(S)" /></td><td><input placeholder="Age" /></td><td><input placeholder="City" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Male" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Female" /></td>'; 
 
    var row = document.createElement("tr"); 
 
    row.innerHTML = rowHTML; 
 
    
 
    var table = document.getElementById('myTable'); 
 
    table.appendChild(row); 
 
    idx++; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="tableDiv"> 
 

 
    <table id="myTable"> 
 
     <tr id="firstRow"> 
 
     <td>Surname</td> 
 
     <td>Forname(S)</td> 
 
     <td>Age</td> 
 
     <td>City</td> 
 
     <td class="gender">Male</td> 
 
     <td class="gender">Female</td> 
 
     </tr> 
 
    </table> 
 

 
    <input type="submit" id="buttonOne" onclick="addRow()" value="+" /> 
 
    </div> 
 
</body> 
 
</html>

출처

2016-07-04 09:36:47

+0

입니다. innerHTML + =는 사용자가 입력 한 값을 재설정합니다. .. – Rayon

+0

이것은 훌륭하게 작동합니다, 고맙습니다. 로드시 첫 번째 행이 표시되도록해야합니다. 응급 메이트 –

+0

@ 레이 욘, "재설정"을 피하기 위해 업데이트되었습니다. –

0

JQuery와 함께이 작업을 완료,이 시도 :

function addRow() { 
 
    var table = $('#myTable'); 
 
    var newRow = $("#myTable tr:last").clone() 
 
    var name = $(newRow).find("input[type='radio']").attr("name"); 
 
    var newVal = parseInt(name.match(/\d+/)) + 1; 
 
    $(newRow).find("input[type='radio']").attr("name", 'gender' + newVal); 
 
    table.append(newRow); 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="tableDiv"> 
 

 
    <table id="myTable"> 
 
     <tr id="firstRow"> 
 
     <td>Surname</td> 
 
     <td>Forname(S)</td> 
 
     <td>Age</td> 
 
     <td>City</td> 
 
     <td class="gender">Male</td> 
 
     <td class="gender">Female</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <input placeholder="Surname" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Forename(S)" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Age" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="City" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender0" type="radio" value="Male" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender0" type="radio" value="Female" /> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <input placeholder="Surname" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Forename(S)" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Age" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="City" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender1" type="radio" value="Male" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender1" type="radio" value="Female" /> 
 
     </td> 
 
     </tr> 
 

 
     <tr id="lastRow"> 
 
     <td> 
 
      <input placeholder="Surname" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Forename(S)" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="Age" /> 
 
     </td> 
 
     <td> 
 
      <input placeholder="City" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender2" type="radio" value="Male" /> 
 
     </td> 
 
     <td> 
 
      <input class="gender" name="gender2" type="radio" value="Female" /> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <input type="submit" id="buttonOne" onclick="addRow()" value="+" /> 
 
    </div> 
 
</body> 
 

 

 

 
</html>

출처

2016-07-04 09:54:33

+0

감사합니다.이 기능은 훌륭하게 작동합니다. 자바 스크립트 및 jQuery 버전을 사용하는 것이 좋습니다. Govind –

+0

OP가이 답변에 만족해 보이지만 * 일반적으로 * jQuery는 JavaScript 질문에 대답하지 않습니다. 이렇게하기 위해 투표를해야 할지도 모릅니다. 또한 FYI @Matti_Leeds jquery 솔루션을 가지고 행복하다면이 말을하고 적절한 태그를 추가하는 것이 좋다. – Liam

+0

Matti_Leeds가 jQuery를 html로 사용했기 때문에 jQuery를 사용한 이유는 다음 번부터 다룰 것입니다. 감사 –

관련 문제

 관련 문제