现在有个问题,通过append("<td>...</td>");这种形式,页面上显示Object.
通过appendChild()方式,又不好添加。尝试用(已经获取了按钮对应的tr元素)tr.item(tr.length-2).appendChild(),
却发现添加的在按钮前面那个“x”的td里面.
假定要点击的按钮id为btn,td父级元素id为tr
var add_table = documet.getElementById("btn");
var tr = documet.getElementById("tr");
add_table.addEventListener("click",function(){
tr.appendChild("
不错,值得学习不错,值得学习
非常有学习价值,动态给tr添加td
我去,appendChild("");的内容为《td》《/td》,,,原谅我用中文的书名号,英文下会被当成标签执行,显示不出来
希望楼主把html代码贴出来,这样更有助于其他人帮助您解决问题
我的思路是还要看下这个btn按钮是不是在那个table里面,同时还要看是不是每一行都是一个独立的table,然后如果不是当你添加其中一行必然下面
的那一行也是会受到影响的,所以你其余的行数默认最后一列要执行添加跨列属性来保持样式。暂时看不到你的代码,无法提供清晰的思路去解决,可能是我tooyoungtoosimple了嘿嘿
这个问题,楼主已经找到了一个勉勉强强的答案。下面给大家介绍下,权当参考。
问题描述:点击新增,弹出模态框,录入值,动态在对应的tr中添加td,并在td中创建一个input标签,把录入的值传递给input。
//前面弹出模态框就不说了,网上其他的资料已经很详细了。
//这个函数,是点击模态框保存按钮触发的。
function addnewRowValue() {
//在点击新增按钮时,会调用一个函数,把按钮的id值传递给一个input(hidden)保存。
//buttonId代表新增按钮的id值(确定是哪一行的新增按钮)
var buttonId = document.getElementById('clickButtonId').value;
//获取模态框中录入的值
var rowValue = $("#rowValue").val();
//创建一个td节点,并书写样式
var tdNode1 = document.createElement("td");
tdNode1.style = "width:10%;";
//创建一个input节点,并录入属性和值
var inputNode = document.createElement("input");
inputNode.type ="text";
inputNode.value = rowValue;
inputNode.setAttribute("class","form-control");
//将input节点加入到td中
tdNode1.appendChild(inputNode);
//关闭的符号
var tdNode2 = document.createElement("td");
var textNode = document.createTextNode("×");
tdNode2.style = "width:2%;";
tdNode2.appendChild(textNode);
//隐藏模态框
$('#addNewValueModal').modal('hide');
//获取新增按钮对应的td和tr
var td = document.getElementById(buttonId).parentNode;
var tr = td.parentNode;
//按钮存在的节点数
var tdLen =td.childNodes.length;
//在tr中新增按钮前,插入节点
tr.insertBefore(tdNode1,tr.childNodes[tr.childNodes.length-tdLen]);
tr.insertBefore(tdNode2,tr.childNodes[tr.childNodes.length-tdLen]);
}
这样就能够实现在tr中动态添加td。
新的问题:
td的样式失效了。
这个问题,谁有答案?