我正在尝试在HTML表格中动态添加行,并且工作正常。现在我要做的是,我想让它们不可编辑。也就是说,一旦创建它们,它们应该表现为正常的<tr>
<td>
元素!我尝试在追加后分配readonly属性,但它不起作用。
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++;
}
答案 0 :(得分:3)
使用setAttribute()
方法。
inputElement.setAttribute('readonly',true);
答案 1 :(得分:0)
JavaScript区分大小写。
t2.readOnly = true;
答案 2 :(得分:0)
我建议使用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++;
});
看到代码大幅减少。