导航:首页 > 编程语言 > js创建trtd

js创建trtd

发布时间:2023-02-01 14:28:23

js怎样使用appendChild 给table 增加tr td

设置table的class为test。

JS代码如下:

var t=document.getElementsByClassName("test")[0];

var tr=document.createElement("tr");

var td1=document.createElement("td");

var td2=document.createElement("td");

var td3=document.createElement("td");

td1.innerHTML="c-01";

td2.innerHTML="c-02";

td3.innerHTML="c-03";

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

t.prepend(tr);

(1)js创建trtd扩展阅读:

js中常用追加元素的方法:

1、append():在父级最后追加一个子元素 。

$(".append").click(function(){

$("#wrap").append("<p class='three'>我是子元素append</p>");

});

2、appendTo():将子元素追加到父级的最后。

$(".appendTo").click(function(){

$("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));

});

3、prepend():在父级最前面追加一个子元素。

$(".prepend").click(function(){

$("#wrap").prepend("<p class='three'>我是子元素prepend</p>");

});

Ⅱ ajax异步用jquery动态创建table,添加tr-td的同时,需要合并跨行的相同的单元格

合并行单元格 比如合并 第二行第二个和第三个单内元格容:

$("#table3tr:gt(0):eq(1)td:eq(1)").attr("colspan",2);
$("#table3tr:gt(0):eq(1)td:eq(2)").remove();

Ⅲ 如何将下面的JS效果放到指定的TR或TD中

正规的添加表格行是 insertrow,添加单元格是 insertcell。而且你 createelement 里面需要是合法的 html 元素标签,例如 tr,td。
function
btncreatelemet_click()
{
var
con=document.getelementbyid("lblnewelemet");
var
row
=
con.insertrow(0);
var
cell
=
row.insertcell(0);
cell.innerhtml
=
"aaaaa";
}
下面是使用 createelement 创建 tr 和 td,但这样不标准
function
btncreatelemet_click()
{
var
con
=
document.getelementbyid("lblnewelemet");
var
tr
=
document.createelement("tr");
con.appendchild(tr);
var
td
=
document.createelement("td");
tr.appendchild(td);
td.innerhtml
=
"aaaaa";
}

Ⅳ JS动态生成TR,TD分页

<input type="button" value="添加行" onclick="onchecks();">
<table id="tb" width="100%" border="1" cellspacing="0" cellpadding="1"

style="filter:Alpha(opacity=65)">
</table>
我用JS动态生成tr和td
<script>
function onchecks(){
var tr1 = document.getElementById("tb").insertRow();
var td1 = tr1.insertCell();
td1.width = "100px";
td1.align = "center";
td1.innerHTML="第一页";
var td2 = tr1.insertCell();
td2.width = "100px";
td2.innerHTML="第二页";
}
</script>

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

两个insert方法返回的就是被插入的对象,直接操作这两个对象就行了,比如版:
var tr = table.insertRow();
var td = tr.insertCell();
tr.setAttribute('align','center'); '不用setAttribute而直接权使用属性也可以.
tr.setAttribute('bgcolor','#FF0000')
td.width=100; '直接对属性赋值的作法.
如果还有问题欢迎追问,问题解决请及时选为满意回答,谢谢.

Ⅵ 在JS里创建了一个数组,创建了表格的<tr>和<td>,然后我想将数组里的值遍历到创建的<td>中,怎么处理

大体应该是这样吧,没有写完,好多条件没考虑全面,还需要你自己完善<html>
<head>
<script language="javascript">
function on_Load(rowCount,colCount)
{
var ch_rm=new Array("北京","上海","广州","深圳","成都","长沙","杭州","天津","重庆","沈阳","哈尔滨","武汉","南京","西安","济南","合肥","

福州");
var cityTable=document.getElementById("cityTable");//获取表格ID
if (cityTable.rows.length>0)
{
for(var clr=cityTable.rows.length-1;clr>=0;clr--)
{
cityTable.deleteRow();
}
}
for(var r=0;r<rowCount;r++)
{
var row=document.createElement("tr");

for (var i=0;i<colCount;i++){
var chIndex = r*colCount+i+document.getElementById("hid_Last").value*rowCount*colCount;

if (chIndex >= ch_rm.length)
{
break;
}
var cell=document.createElement("td");
cell.innerText = ch_rm[chIndex];

row.appendChild(cell);
}
cityTable.appendChild(row);
}

}
function showList(objType)
{
if (objType != null)
{
if (objType == 1) //首页
{
document.getElementById("hid_Last").value = 0;
on_Load(5,2);
}
else if (objType == 2) //上页
{
if (document.getElementById("hid_Last").value>0)
{
document.getElementById("hid_Last").value -= 1;
on_Load(5,2);
}
}
else if (objType == 3) //下页
{
document.getElementById("hid_Last").value += 1;
on_Load(5,2);
}
else if (objType == 4)//尾页
{

}
}
}
</script>
</head>

<body onload="on_Load(5,2);">
<div id="a">asdf
<table>
<tbody id="cityTable">
</tbody>
</table>
<input type="hidden" id="hid_Last" value = "0">
<button id="btnPer" onclick="showList(1)">首页</button>
<button id="btnPer" onclick="showList(2)">上页</button>
<button id="btnPer" onclick="showList(3)">下页</button>
<button id="btnPer" onclick="showList(4)">尾页</button>
</div>
</body>
</html>

Ⅶ JS动态生成td tr

OK
<script type="text/javascript">
var learnnum=0;
var learntemp=0;
function addlearn(){
var learntb = document.getElementById('learntb');
learnnum += 1;
learntemp += 1;
var learntr = document.createElement('tr');
learntr.id = "learntr"+learnnum;

var learntd1 = document.createElement('td');
learntd1.className = "td3";
learntd1.innerHTML = "起止时间:";

var learntd2 = document.createElement('td');
learntd2.className ="td4";
learntd2.innerHTML = "<input type='text' name='learntime"+ learnnum +"'/>";

var learntd3 = document.createElement('td');
learntd3.className = "td3";
learntd3.innerHTML = "毕业学校:";

var learntd4 = document.createElement('td');
learntd4.className ="td4";
learntd4.innerHTML = "<input type='text' name='endschool"+ learnnum +"'/>";

var learntd5 = document.createElement('td');
learntd5.className = "td3";
learntd5.innerHTML = "所学专业:";

var learntd6 = document.createElement('td');
learntd6.className ="td4";
learntd6.innerHTML = "<input type='text' name='professional"+ learnnum +"'/>";

var learntd7 = document.createElement('td');
learntd7.className = "td3";
learntd7.innerHTML = "教育方式:";

var learntd8 = document.createElement('td');
learntd8.className ="td4";
learntd8.innerHTML = "<input type='text' name='way"+ learnnum +"'/>";

learntr.appendChild(learntd1);
learntr.appendChild(learntd2);
learntr.appendChild(learntd3);
learntr.appendChild(learntd4);
learntr.appendChild(learntd5);
learntr.appendChild(learntd6);
learntr.appendChild(learntd7);
learntr.appendChild(learntd8);
learntb.appendChild(learntr);

// var lt = document.getElementById('learntemp');
// lt.value = learntemp;

}
</script>

<body onload="addlearn();">
This is my JSP page. <br>

<table>
<tbody id="learntb">
</tbody>

</table>
</body>

Ⅷ JS怎样使用appendChild 给table 增加tr td

insertRow()函数可以带参数,形式如下:这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前,默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。

<scriptlanguage="JavaScript">

vart=document.getElementById("test");

t.innerHTML="<tr><td>数据</td></tr>";

//或者

vart=document.getElementById("test");

vartr=document.createElement("tr");

vartd=doucment.createElement("td");

td.innerHTML="数据";

tr.appendChild(td);

t.appendChild(tr);

</script>

(8)js创建trtd扩展阅读:

给table添加一行

1、$("#addTable").click(function(){;

2、vartr="<tr>"+;

3、"<td>11</td>"+;

4、"<td>22</td>"+;

5、"<td>33</td>"+;

6、"<td>44</td>"+;

7、"<td>55</td>"+;

8、"</tr>";

9、$(".layui-table").append(tr);

Ⅸ 动态生成tr和td,每一行只能有四个td

function changeTab(lmjc){
var size= document.getElementsByName("tdname").length;
var tNdoe = document.getElementById("table"); //获取table节点
for(var i=0 ;i<=size/4;i++ ){
var trNode =document.createElement("tr");
for(var j =0;j<4;j++){
var trNode =document.createElement("td"); //创建td节点
tdNode.innerHTML='放td的值' ; //可以循环赋值
trNode.appendChild(tdNode); //追加td节点到tr ,共四个
}
tNode.appendChild(trNode); //追加tr节点到table
}
}

阅读全文

与js创建trtd相关的资料

热点内容
android多线程写文件栈溢出 浏览:242
台电酷闪量产工具 浏览:837
如何破坏文件 浏览:15
从什么网站上查找国家标准 浏览:254
iphone5s最省电的浏览器 浏览:225
用数据线如何接摄像头 浏览:110
qq手机电脑互传文件 浏览:613
linux内核升级方法 浏览:986
iphone5没有热点 浏览:189
哪里有在线幼儿c语言编程 浏览:959
iframe跨域调用js对象 浏览:178
苹果手机能分文件夹吗 浏览:679
fdb文件怎么删除里面内容 浏览:638
龙江网络配置什么路由器 浏览:169
如何使用指标导入数据 浏览:866
平时用什么app看nba 浏览:503
win10想以管理员身份运行bat文件 浏览:85
合并单元格中的其他数据如何排序 浏览:331
电脑窗口程序在哪 浏览:281
前女友把我微信删了又加什么意思 浏览:655

友情链接