使用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>

的JavaScript：

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

它的作品，但現在的問題是它不允許我寫任何東西！有沒有一種方法可以檢查元素是否已被追加。如果它是真的，那麼它應該被設置爲只讀屬性 – 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

我必須使用javascript – Insafian

來做到這一點。我也試過你的代碼。它不允許寫任何東西！因爲只讀屬性 – Insafian

使用Javascript插入行到表

回答

相關問題