Javascript를 사용하여 테이블에 행 삽입

HTML 테이블에 행을 동적으로 추가하려고합니다. 이제 내가하려는 것은 편집 할 수 없도록 만들고 싶습니다. 즉, 일단 만들어지면 정상적으로 동작해야합니다. <tr><td> 요소! 추가 한 후에 readonly 속성을 할당하려고 시도했지만 작동하지 않았습니다.Javascript를 사용하여 테이블에 행 삽입

html로

<!DOCTYPE html> 
<html> 
<head> 
<script src = "myScripts.js" type = "text/javascript"></script> 

</head> 
<body> 


<table id="myTable" border="1"> 
<tr> 
<th>First Name</th> 
<th>Last Name</th> 
</tr> 

</table><br> 

<button onclick="addRow()">Add Row</button> 

</body> 
</html>

자바 스크립트 :

var index = 1; 
function addRow(){ 
      var table=document.getElementById("myTable"); 
      var row=table.insertRow(table.rows.length); 
      var cell1=row.insertCell(0); 
      var t1=document.createElement("input"); 
       t1.id = "txtName"+index; 
       cell1.appendChild(t1); 
      var cell2=row.insertCell(1); 
      var t2=document.createElement("input"); 
       t2.id = "txtAge"+index; 
       cell2.appendChild(t2); 
     //t2.readonly = "readonly"; 
     index++; 

}

출처

2014-03-25 Insafian

는 setAttribute() 방법을 사용합니다.

inputElement.setAttribute('readonly',true);

출처

2014-03-25 16:39:28

작동하지만 지금 문제는 내가 아무것도 쓸 수 없다는 것입니다! 요소가 추가되었는지 확인할 수있는 방법이 있습니까? true이면 읽기 전용 속성 – Insafian

으로 설정해야합니다. DOM을 통해 요소에 접근 할 수 있으면 추가됩니다. 예를 들어'document.getElementById ('foo')'를 실행하고'null '을 얻으면 ID가''foo' '인 요소가 없습니다. –

JavaScript는 대소 문자를 구별합니다.

t2.readOnly = true;

출처

2014-03-25 16:49:47

코드 줄이 크게 줄어들어 jQuery를 사용하는 것이 좋습니다.

아래와 같이 readOnly 속성을 사용했습니다.

데모를 here

HTML을 참조하십시오

<table id="myTable" border="1"> 
<tr> 
<th>First Name</th> 
<th>Last Name</th> 
</tr> 

</table><br><button id="addRow">Add Row</button>

JS :

var i=1; 

$('#addRow').click(function(){ 
    var appendString = "<tr><td><input type='text' id='txtName"+i+"' readonly='readonly' /></td><td><input type='text' id='txtAge"+i+"' readonly='readonly' /></td></tr>"; 

    $('#myTable tr:last').after(appendString);  
    i++; 
});

코드가 급격히 감소 참조하십시오.

출처

2014-03-25 17:09:13 Aniruddha

자바 스크립트를 사용하여이 작업을 수행해야합니다. – Insafian

또한 코드를 사용해 보았습니다. 아무것도 쓸 수 없어요! readonly 속성 때문에 – Insafian

Javascript를 사용하여 테이블에 행 삽입

답변

관련 문제