테이블이 왜 보이지 않습니까? 이제 막 붙어

나는 '+'버튼을 누르면 양식과 함께 1 rowed 테이블을 복제하려고합니다. - 그 아래의 다른 테이블 양식을 정확히 드롭 다운하고 싶습니다.테이블이 왜 보이지 않습니까? 이제 막 붙어

- 나는 나는 들여 코드를 가지고 아래 그 후 폼에 스크린 샷 이미지를 가지고

... 나는 다른 무언가를 얻을, 그렇게하고 HTML 코드 테이블과 같은 요소를 추가

위의 코드에 대한 코드 ES는 아래와 같습니다 - 첫 번째는 javascipt 코드는 아래 게시

<body> 
     <form> 

      <div id="container1"> 

<table border="1" cellspacing="0" style="margin-top:12px width="900""> 
<colgroup> 
<col span="1"> 
</colgroup> 
<tr> 
<td valign="top"> 
<label for="company" size="3">Company:</label> <input type="text" id="company" name="company" maxlength="15" size="15"> 
</td> 
<td valign="top"> 
<label for="position1" size="3">Position:</label> <input type="text" id="position1" name="position1" maxlength="20" size="12"> </td> <td valign="top"><label for="tasks" size="3"> Tasks: </label></td><td> <textarea id="tasks" name="tasks" maxlength="1000" cols="25" rows="1"></textarea></td> 
<td valign="top"><label for="from1" size="3"> From: </label><input type="text" id="from1" name="from1" size="4" ></td> <td valign="top">To: <input type="text" id="to1" name="to1" size="4"> <td valign="top"><label for="location" size="3">Work Location: </label><input type="text" id="location" name="location" size="20" maxlength="25"><a href="#" id="Add1" onclick="aFields1()"> + </a><br></td> 
</tr> 
</table><br>    
      </div> 

     </form> 
    </body>

자바 스크립트 기능이있는 두 번째 양식 인과 : 테이블이 표시되지 않는 이유

이

function aFields1(){ 
var container1 = document.getElementById("container1"); 
var table = document.createElement("table"); 

table.border=1; 
table.cellspacing=0; 
var tr = document.createElement("tr"); 
var td = document.createElement("td"); 
td.valign = "top"; 

var label = document.createElement("label"); 
label.for = "company"; 
label.size = 3; 
container1.appendChild(document.createTextNode("Company: ")); 
container1.appendChild(label); 

var company = document.createElement("input"); 
company.type = "text"; 

company.id = "company"; 
company.name = "company"; 
company.size = 15; 
company.maxlenth = 15; 
//append the company input element to the td element 
td.appendChild(company); 

tr.appendChild(td); 
table.appendChild(tr); 
//append the td element to the container1 element 
//container1.appendChild(tr); 
container1.appendChild(table);

사람이 말해 주시겠습니까에게 ?

회사 라벨과 입력 막대가있는 셀이 하나 이상있는 경계선이 있어야합니다. 이미지에서 볼 수 있듯이 회사 라벨이 상단에 있고 테두리가있는 입력 막대가 아래에 있습니다. ..

나는 잘못 갔습니까? 왜 HTML 코드에서 나온 것과 테두리가 셀의 훨씬 다른 점입니까?

출처

2015-01-22 Jose josemartinez Martinez

모든 요소를 처음부터 만드는 대신 테이블 행을 복제 할 수 있습니다. 예제를 첨부했지만 복제 후 ID를 고유하게 만들기 위해 추가하기 전에 ID와 이름을 변경/증분 할 수 있습니다. 나는 너에게 맡길거야. 장래에 HTML과 JavaScript를 들여 쓰도록하십시오.

FYI : tbody에 ID를 추가하면 선택하기가 더 쉽습니다.

 function aFields1() { 
 
     \t var lastTableRow = document.getElementsByTagName("TBODY")[0].lastElementChild; 
 
     \t var newRow = lastTableRow.cloneNode(true); 
 
     \t document.getElementsByTagName("TBODY")[0].appendChild(newRow); 
 
     }

<body> 
 
     <form> 
 

 
      <div id="container1"> 
 

 
<table border="1" cellspacing="0" style="margin-top:12px width="900""> 
 
<colgroup> 
 
<col span="1"> 
 
</colgroup> 
 
<tr> 
 
<td valign="top"> 
 
<label for="company" size="3">Company:</label> <input type="text" id="company" name="company" maxlength="15" size="15"> 
 
</td> 
 
<td valign="top"> 
 
<label for="position1" size="3">Position:</label> <input type="text" id="position1" name="position1" maxlength="20" size="12"> </td> <td valign="top"><label for="tasks" size="3"> Tasks: </label></td><td> <textarea id="tasks" name="tasks" maxlength="1000" cols="25" rows="1"></textarea></td> 
 
<td valign="top"><label for="from1" size="3"> From: </label><input type="text" id="from1" name="from1" size="4" ></td> <td valign="top">To: <input type="text" id="to1" name="to1" size="4"> <td valign="top"><label for="location" size="3">Work Location: </label><input type="text" id="location" name="location" size="20" maxlength="25"><a href="#" id="Add1" onclick="aFields1()"> + </a><br></td> 
 
</tr> 
 
</table><br>    
 
      </div> 
 

 
     </form> 
 
</body>

출처

2017-05-19 16:09:54 Canolyb1

테이블이 왜 보이지 않습니까? 이제 막 붙어

답변

관련 문제