Javascript 테이블 행 추가

Question

나는 내가 원하는 곳에 행을 추가하는 방법을 모르겠습니다. 행에서 새 행을 생산

<tr id="my_div"></tr> 

현재를 : 나는 행을 표시 할 위치

다음

<script language="javascript"> 
var i = 1; 
function changeIt() 
{ 
    i++; 
    my_div.innerHTML = my_div.innerHTML +"<tr><td valign='middle'><strong>URL "+ i+":</strong></td><td><input name='url'+ i type='text' size='40' /></td></tr>" 
} 
</script> 

<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>"> 
    <table width="300px"> 
     <tr> 
      <td valign="middle"><strong>Name:</strong></td> 
      <td><input name="name" type="text" size="40" /></td> 
     </tr> 
     <tr> 
      <td valign="middle"><strong>Password:</strong></td> 
      <td><input name="password" type="text" size="40" /></td> 
     </tr> 
     <tr> 
      <td valign="middle"><strong>URL:</strong></td> 
      <td><input name="url" type="text" size="40" /><a href="" onClick="changeIt();return false;">+</a></td> 
     </tr> 
     <tr id="my_div"></tr> 
     <tr> 
      <td valign="middle"><strong>ETC:</strong></td> 
      <td><input name="etc" type="text" size="40" /></td> 
     </tr> 

이다. 나는 그것을 원하지 않는다. 나는 단지 연속적으로 새로운 행을 원하지 않는다.

내가 그것을 생산하려는 + 클릭하면 :

<tr> 
     <td valign="middle"><strong>URL 2:</strong></td> 
     <td><input name="url2" type="text" size="40" /></td> 
    </tr> 

을 나는 싶지 않아 내 : 난 그냥 것에도 모르기 때문에 것을이

<tr id="my_div"></tr> 

해야 할 것.

Answer 1

URL1 다음에 테이블에 다른 행을 추가하려면 URL1 앞에 행을주고 id 속성은 innerHTML에 추가하십시오. JS를 1로 시작하는 현재 URL 번호를 검색하도록 설정 했으므로 버튼을 클릭 할 때마다 URL 행이 추가됩니다.

나는 또한 ''이

<script language="javascript"> 
var i = 1; 
function changeIt(){ 
    var myCurrentTable = document.getElementById("myTable"); 
    var txt = myCurrentTable.innerHTML; 
    i++; 
    txt = txt.replace('<tr id="etc_row">', '</tr><tr id="url_row_' + i + '"><td valign="middle"><strong>URL '+ i+':</strong></td><td><input name="url' + i + '" type="text" size="40" /></td><tr id="etc_row">'); 
    myCurrentTable.innerHTML = txt; 
} 
</script> 

<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>"> 
<table id="myTable" width="300px"> 
    <tr id="name_row"> 
     <td valign="middle"><strong>Name:</strong></td> 
     <td><input name="name" type="text" size="40" /></td> 
    </tr> 
    <tr id="pw_row"> 
     <td valign="middle"><strong>Password:</strong></td> 
     <td><input name="password" type="text" size="40" /></td> 
    </tr> 
    <tr id="url_row_1" > 
     <td valign="middle"><strong>URL:</strong></td> 
     <td><input name="url" type="text" size="40" /><a href="#" onClick="javascript:changeIt();">+</a></td> 
    </tr> 
    <tr id="etc_row"> 
     <td valign="middle"><strong>ETC:</strong></td> 
     <td><input name="etc" type="text" size="40" /></td> 
    </tr> 
</table> 

Answer 2

테이블을 수정 innerHTML을 사용하지 마십시오 틱 포함하도록 name 속성을 업데이트, 그것은 IE의 대부분의 버전에서 오류가 발생합니다. DOM 메소드를 사용하십시오.

링크 또는 앵커를 사용하지 않으려면 A 요소를 사용하지 말고 단추 또는 스타일이 지정된 범위와 같은 요소를 사용하십시오.

TR 요소를 DIV 요소의 자식으로 추가 할 수 없습니다. 유효하지 않습니다. 테이블 섹션 요소 (thead, tbody 또는 tfoot)의 하위로 추가해야합니다. 경우에 따라 테이블 요소에 행을 추가 할 수 있지만 일부 브라우저는이를 좋아하지 않습니다.

그래서 새 행을 만드는 데 사용 :

var tr = document.createElement('tr'); 
var td = tr.appendChild(document.createElement('td')); 

// Much better to add a class and do this stuff with CSS 
td.style.valign = 'middle'; 
var span = document.createElement('span'); 
span.style.fontWeight = 'bold'; 
span.appendChild(docment.createTextNode('URL ' + i); 

td = tr.appendChild(document.createElement('td')); 
var input = td.appendChild(document.createElement('input')); 
input.name = 'url' + i; 
input.type = 'text'; 
input.size = '40' 

지금 어딘가 테이블 섹션에 TR을 추가합니다. 당신은 아래 표에 추가 할 수있는 행을 구축하고 숨겨진, 다음 그냥 복제 및 필요한 비트를 수정 할 수

<script> 
var i = 1; 

function changeIt() { 
    var tr = document.createElement('tr'); 
    var td = tr.appendChild(document.createElement('td')); 
    td.style.valign = 'middle'; 

    var span = td.appendChild(document.createElement('span')); 
    span.style.fontWeight = 'bold'; 
    span.appendChild(document.createTextNode('URL ' + i)); 

    td = tr.appendChild(document.createElement('td')); 
    var input = td.appendChild(document.createElement('input')); 
    input.name = 'url' + ++i; 
    input.type = 'text'; 
    input.size = '40' 

    document.getElementById('myTable').tBodies[0].appendChild(tr); 

} 
</script> 

<form> 
    <table width="300px"> 
     <tr> 
      <td valign="middle"><strong>Name:</strong></td> 
      <td><input name="name" type="text" size="40" /></td> 
     </tr> 
     <tr> 
      <td valign="middle"><strong>Password:</strong></td> 
      <td><input name="password" type="text" size="40" /></td> 
     </tr> 
     <tr> 
      <td valign="middle"><strong>URL:</strong></td> 
      <td><input name="url" type="text" size="40"> 
       <input type="button" onclick="changeIt();" value="+"></td> 
     </tr> 
     <tr id="my_div"></tr> 
     <tr> 
      <td valign="middle"><strong>ETC:</strong></td> 
      <td><input name="etc" type="text" size="40" /></td> 
     </tr> 
    </table> 
</form> 


<table id="myTable"> 
    <tbody></tbody> 
</table> 

: 같은

document.getElementById('myTable').tBodies[0].appendChild(tr); 

모든 것은 보인다.