js中怎样设置动态tr的属性

Posted 2023-04-10

在javascript中，用tr = table.insertRow()；td = tr.insertCell()生成的tr、td，现在想设置这个tr的align、bgcolor属性，设置td的width属性，请问要怎样设置？谢谢！！

两个insert方法返回的就是被插入的对象,直接操作这两个对象就行了。

var tr = table.insertRow();var td = tr.insertCell();tr.setAttribute('align','center');  '不用setAttribute而直接使用属性也可以.tr.setAttribute('bgcolor','#FF0000')
td.width=100;   直接对属性赋值的作法。

要在tr元素的父元素中才能增加行，不能在tr本身去增加行。而tbody就是tr的父元素。如果是增加td，就要用tr，因为tr是td的父元素。

<script> // Last updated 2006-02-21 function addRowToTable() var tbl = document.getElementById('tblSample'); var lastRow = tbl.rows.length。

// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;。

var row = tbl.insertRow(lastRow); // left cell var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.appendChild(textNode);
// right cell var cellRight = row.insertCell。


var el = document.createElement('input'); el.type = 'text'; el.name = 'txtRow' + iteration; el.id = 'txtRow' + iteration; el.size = 40。

el.onkeypress = keyPressTest; cellRight.appendChild(el)。

参考技术A 两个insert方法返回的就是被插入的对象,直接操作这两个对象就行了,比如:
var tr = table.insertRow();
var td = tr.insertCell();
tr.setAttribute('align','center'); '不用setAttribute而直接使用属性也可以.
tr.setAttribute('bgcolor','#FF0000')
td.width=100; '直接对属性赋值的作法.
如果还有问题欢迎追问,问题解决请及时选为满意回答,谢谢. 参考技术B <script>
// Last updated 2006-02-21
function addRowToTable()

var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);

// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;

el.onkeypress = keyPressTest;
cellRight.appendChild(el);

// select cell
var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'selRow' + iteration;
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
cellRightSel.appendChild(sel);

function keyPressTest(e, obj)

var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked)
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event)
key = window.event.keyCode;

else if(e.which)
key = e.which;

var objId;
if (obj != null)
objId = obj.id;
else
objId = this.id;

displayObj.innerhtml = objId + ' : ' + String.fromCharCode(key);


function removeRowFromTable()

var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);

function openInNewWindow(frm)

// open a blank window
var aWindow = window.open('', 'TableAddRowNewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

// set the target to the blank window
frm.target = 'TableAddRowNewWindow';

// submit
frm.submit();

function validateRow(frm)

var chkb = document.getElementById('chkValidate');
if (chkb.checked)
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length - 1;
var i;
for (i=1; i<=lastRow; i++)
var aRow = document.getElementById('txtRow' + i);
if (aRow.value.length <= 0)
alert('Row ' + i + ' is empty');
return;



openInNewWindow(frm);


</script>
<form action="tableaddrow_nw.html" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="button" value="Submit" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit
</p>
<p>
<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
</p>
<table border="1" id="tblSample">
<tr>
<th colspan="3">Sample table</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="txtRow1"
id="txtRow1" size="40" onkeypress="keyPressTest(event, this);" /></td>
<td>
<select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
</select>
</td>
</tr>
</table>
</form> 参考技术C Q上问我吧

怎样在table下面动态增加一行

参考技术A 比如设置table的id为tab
var trHTML = "<tr><td>...</td></tr>"
$("#tab").append(trHTML);//在table最后面添加一行
$("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行
这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行
$(function()
$(":button").click(function()
var tr = "<tr><td>new</td></tr>";
//$("table").append(tr);
$("table tr:eq(2)").after(tr);
);
);
这是我测试用的代码，你可以运行看看本回答被提问者采纳