Question

javascript的innerhtml使用请教

我想当我点新增的时候就会在table的最后新增加一行，也就是说会自动把id="tr1"的整个tr都复制一份，然后插入到tr1的后面，请问这样的javascript应该怎么写？请大侠帮忙看看

<input type="button" value="新增" style="width:50" onclick="addtr()">
<table width="98%" id="tdata" cellspacing="1" class="TableBorderLight">
<tr align="center" height="25" class="TableBorderLight">
<th nowrap rowspan=2>Part</th>
<th nowrap rowspan=2>Material</th>
<th nowrap colspan=2>UNIT PRICE</th>
<th nowrap colspan=2>REMARKS</th>
</tr>
<tr align="center" height="25" class="TableBorderLight">
<th nowrap width="20">M'S/US$</th>
<th nowrap width="20">W'S/US$</th>
<th nowrap>M'S/US$</th>
<th nowrap>W'S/US$</th>
</tr>
<tr bgcolor="#FFFFFF" align="center" id="tr1">
<td><input type="text" id="part1" name="part1" onblur="chkLen(this,50)" value="Sole mold" readonly></td>
<td><input type="text" id="mat1" name="mat1" onblur="chkLen(this,100)"></td>
<td><input type="text" id="upm1" name="upm1" onblur="chkLen(this,30)" size="5"></td>
<td><input type="text" id="upw1" name="upw1" onblur="chkLen(this,30)" size="5"></td>
<td><input type="text" id="rmm1" name="rmm1" onblur="chkLen(this,200)"></td>
<td><input type="text" id="rmw1" name="rmw1" onblur="chkLen(this,200)"></td>
</tr>
</table>

Answer 1

var ct3 = {
i:1,
addRow:function(event_ff, type, data){
var table =document.getElementById("testTbl");
if(type == 'down'){
var obj = (document.all)?event.srcElement:event_ff;
var index= obj.parentNode.parentNode.rowIndex;
index++;
}else if(type == 'up') {
var obj = (document.all)?event.srcElement:event_ff;
var index= obj.parentNode.parentNode.rowIndex;
}else{
index = table.rows.length;
}
var newTr =table.insertRow(index);
if(data==0){
var newTd = newTr.insertCell(0);
newTd.style.background = '#ffffff';
newTd.innerHTML = '<td><input type="text" name="line'+this.i+'[ct3_td1_'+this.i+']" id="ct3_td1_'+this.i+'" value="" onfocus="this.select()" /></td>';
newTd = newTr.insertCell(1);
newTd.style.background = '#ffffff';
newTd.innerHTML = '<td><input type="text" name="line'+this.i+'[ct3_td2_'+this.i+']" id="ct3_td2_'+this.i+'" size="10" value="" onfocus="this.select()" /></td>';
}else{
var tmp_id = data['carinfo']['mid'];
var newTd = newTr.insertCell(0);
newTd.style.background = '#ffffff';
newTd.innerHTML = '<td><input type="text" name="line'+this.i+'[ct3_td1_'+this.i+']" id="ct3_td1_'+this.i+'" value="'+data['carinfo']['mname']+'" onfocus="this.select()" /></td>';
newTd = newTr.insertCell(1);
newTd.style.background = '#ffffff';
newTd.innerHTML = '<td><input type="text" name="line'+this.i+'[ct3_td2_'+this.i+']" id="ct3_td2_'+this.i+'" size="10" maxsize value="'+(data['carinfo']['mval']/10000)+'" onfocus="this.select()" /></td>';
}
newTd = newTr.insertCell(2);
newTd.style.background = '#ffffff';
newTd.innerHTML = '<td><input type="text" name="line'+this.i+'[ct3_td3_'+this.i+']" id="ct3_td3_'+this.i+'" size="10" value="" onfocus="this.select()" onkeyup="ct3.calculate('+this.i+');" /></td>';
newTd = newTr.insertCell(3);
newTd.style.background = '#ffffff';
newTd.innerHTML = '<td><input type="text" name="line'+this.i+'[ct3_td4_'+this.i+']" id="ct3_td4_'+this.i+'" size="10" value="" onfocus="this.select()" /></td>';
newTd = newTr.insertCell(4);
newTd.style.background = '#ffffff';
newTd.innerHTML = '<td><input type="text" name="line'+this.i+'[ct3_td5_'+this.i+']" id="ct3_td5_'+this.i+'" value="" onfocus="this.select()" /></td>';
newTd = newTr.insertCell(5);
newTd.style.background = '#ffffff';
newTd.innerHTML = '<td><input type="button" value="上插一行" onclick="ct3.addRow(this, \'up\', \'\');" /> <input type="button" value="下插一行" onclick="ct3.addRow(this, \'down\', \'\');" /> <input name="Submit" type="button" value="删除" onclick="ct3.removeCurrentRow(this);">';
this.i++;
},
removeCurrentRow:function(event_ff) {
var table =document.getElementById("testTbl");
var obj = (document.all)?event.srcElement:event_ff;
var index= obj.parentNode.parentNode.rowIndex;
table.deleteRow(index);
}
}

---------------------------------------------------
调用参考下面的
<tr>
<td bgcolor="#ffffff"><input type="text" name="ct3_td1_1" id="ct3_td1_1" value="" onfocus="this.select()" /></td>
<td bgcolor="#ffffff"><input type="text" name="ct3_td2_1" id="ct3_td2_1" value="" onfocus="this.select()" /></td>
<td bgcolor="#ffffff"><input type="text" name="ct3_td3_1" id="ct3_td3_1" value="" onfocus="this.select()" /></td>
<td bgcolor="#ffffff"><input type="text" name="ct3_td4_1" id="ct3_td4_1" value="" onfocus="this.select()" /></td>
<td bgcolor="#ffffff"><input type="text" name="ct3_td5_1" id="ct3_td5_1" value="" onfocus="this.select()" /></td>
<td bgcolor="#ffffff"><input type="button" name="del" value="删除" onclick="ct3.removeCurrentRow(this);"></td>
</tr>

-------------------------------------------
你可以参考下以上代码

Answer 2

function addtr(){
var tb = document.getElementById("tdata");
var tr = document.getElementById("tr1");
var newTr = tr.innerHTML;
tb.appendChild(newTr);
}

追问

执行 var newTr = tr.innerHTML; 这行的时候出现类型不相符的错误！！怎么解决

追答

前面写错了，刚测试通过了
function addtr(){
var tb = document.getElementById("tdata");
var tr = document.getElementById("tr1");
var newTr = document.createElement("tr");
newTr.innerHTML = tr.innerHTML;
tb.appendChild(newTr);
}

Answer 3

给一个参考的例子吧,你可以看一下:

function copyRows() {
//var ids = new Array();
var checkboxes = document.getElementsByName("checkbox");
var table1 = document.getElementById("table1");

var newTable = document.createElement("table");
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].checked) {
//ids[ids.length-1] = checkboxes[i].value;
var tr = document.createElement("tr");
tr.innerHTML = table1.rows[checkboxes[i].value].innerHTML;
newTable.appendChild(tr);
}
}
//alert(newTable.innerHTML);
document.getElementById("data").innerHTML = newTable.innerHTML;

}