이 문제를 내 테이블에서 어떻게 해결할 수 있습니까?

나는 '+'버튼을 누를 때와 같이 하나의 로우 테이블을 폼에 복제하려고합니다. 다른 테이블 폼을 정확히 아래쪽으로 떨어 뜨리고 싶습니다.이 문제를 내 테이블에서 어떻게 해결할 수 있습니까?

- 아래 그 후 폼에 내가 스크린 샷 이미지를 가지고

... 나는 다른 무언가 얻을, HTML 코드로 테이블과 같은 요소를 추가 나는 들여 코드를 가지고

위의 이미지에 대한 코드는 li 아래 STED - 첫번째는 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;

//은 TD 요소 TD으로 회사의 입력 요소를 추가합니다. appendChild (회사); 테이블이 표시되지 않는 이유

tr.appendChild(td); 
table.appendChild(tr);

//container1.appendChild(tr); 
container1.appendChild(table);

사람이 말해 주 시겠어요 container1을 요소에 TD 요소를 추가?

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

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

출처

2015-01-22 Jose josemartinez Martinez

때마다 사용자 프레스는 "+"그들이 새를 볼 것이라고 원하는 동작입니다 테이블이 추가 되었습니까? 또는 기존 테이블에 새로운 TR이 추가 되었습니까? – hberg

현재 코드를 사용하면 더 많은 테이블을 만들 수 있습니다. 원래 테이블을 확장하거나 하나의 행 테이블을 많이 만들고 싶습니까? –

새 테이블이 기존 테이블에 추가되었습니다 - 추가 테이블 하나만 추가 - 새 TR이 추가 된 것을 선호합니다 –

요소를 새로운 td에 추가하는 대신 직접 DIV에 추가하는 것이 문제입니다. 이것이 왜 테이블 바깥에 나타나고 있는지입니다.

지난 호의에서 이 실제로처럼 보이기를 원한다면 복제 된 TR을 기존 테이블에 추가하는 것입니다. 좋습니다. 여러 가지 방법이 있습니다. 당신은 완전히 자바 스크립트에서 중복 tr을 다시 빌드 할 수 있습니다. 아니면 그냥 첫 번째 테이블 행을 복제하여 테이블에 추가 할 수 있습니다. 이것은 jQuery에서 사소한 일이지만 순수한 자바 스크립트로 수행 할 수 있습니다.

먼저 테이블 요소에 id 속성을 추가합니다. 과 같이 : 다음

<table id="my_table" border="1" cellspacing="0" style="margin-top:12px;width:900px"> 
.....snip rest of your table.... 
</table>

자바 스크립트 복제는 다음과 같이 작업 할 수 있습니다 (참고 : 코드가 안된) :

function aFields1() { 
    var table, tr, cloned_row, inputs_to_clear; 

    // find the table 
    table = document.getElementById('my_table'); 

    // find the first tr element 
    tr = table.querySelectorAll('tr')[0]; 

    // clone the first tr using deep = true option to copy all children 
    tr_cloned = tr.cloneNode(true); 

    // NOTE: the values in the cloned row will already be prefilled, so you probably want to clear input-field values as well 
    inputs_to_clear = tr_cloned.querySelectorAll('input'); 
    foreach (var input in inputs_to_clear) { 
     inputs_to_clear[input].value = ''; 
    } 

    // append the new row 
    table.appendChild(cloned_row); 
}

출처

2015-01-22 20:29:32 hberg

그러면 무엇을해야합니까? –

나는 그것을했다. .. 아직까지 변화가 없다. –

아무도 도와 줄 의사가 없다? –

이 문제를 내 테이블에서 어떻게 해결할 수 있습니까?

답변

관련 문제