2016-10-09 3 views
-2

이렇게 테이블에 HTML로 라디오 버튼을 삽입했습니다.HTML에 여러 라디오 버튼을 삽입하는 방법은 무엇입니까?

<tr> 
     <td> 
     <div class="radio radio-info"> 
      <input type="radio" name="survey1" id="radio1" value="1"> 
      <label></label> 
     </div> 
     </td> 
     <td> 
     <div class="radio radio-info"> 
      <input type="radio" name="survey1" id="radio2" value="2"> 
      <label></label> 
     </div> 
     </td> 
     <td> 
     <div class="radio radio-info"> 
      <input type="radio" name="survey1" id="radio3" value="3"> 
      <label></label> 
     </div> 
     </td> 
     <td> 
     <div class="radio radio-info"> 
      <input type="radio" name="survey1" id="radio4" value="4"> 
      <label></label> 
     </div> 
     </td> 
</tr> 

분명히 한 행의 경우 다소 간단하지만 테이블에 100 개의 행이 있다면 어떻게 될까요? (모든 행에서 위의 코드 (라디오 버튼) 정확하게 복사해야합니다 ...) JS에서 그 일을하는 것에 대한 모든 아이디어?

+3

HTML은 *하지 * 프로그래밍 언어 : 그것은 마크 업 언어입니다. 반복/루프 기능이 없으므로 원하는 DOM 삽입을 수행하는 루프를 실행하려면 클라이언트 측 (예 : JS) 또는 서버 측 (예 : PHP, Node.js) 코드를 사용해야합니다. Jade와 같은 마크 업을 생성하기 위해 템플릿 엔진을 사용할 수도 있습니다. – Terry

+0

@ 테리, 네, 알았어요. 이 때문에 나는 자바 스크립트로 질문을 태그. 그래서 JS에서 어떤 아이디어? (질문은 편집 됨) –

+1

귀하의 질문에 연구 노력이 부족합니다. 방금 HTML 블록을 버리고 사람들에게 코드를 작성하도록 요청하는 것입니다. 이 사이트는 좌절하고 대신 다른 사람을 기다리지 않고 문제를 해결하기 위해 실패한 시도에 대한 도움을 요청합니다. 몇 가지 Google 검색을하십시오 (예 : "JavaScript로 요소를 복제하는 방법"을 묻기 전에 직접 문제를 해결하십시오. – SeinopSys

답변

-1

JS 기반 답변을 받아들이도록 질문을 업데이트 했으므로 요청에 빠르고 간단하게 접근 할 수 있습니다. 삽입 할 라디오 요소의 수를 선언 한 다음 새로운 <input type="radio"> 요소를 추가하는 for 루프를 생성합니다 특정 테이블 행에 :

var counts = 100; 
 
for (var i = 0; i < counts; i++) { 
 
    document.getElementById('radio').innerHTML += '<td><div class="radio radio-info"><input type="radio" name="survey1" id="radio'+(i+1)+'" value="'+(i+1)+'"><label></label></div></td>'; 
 
    }
<table> 
 
    <tr id="radio"></tr> 
 
</table>

관련 문제