js添加和删除td_js动态添加、删除html代码

⑴ 用js编写一个由添加和删除按钮来控制添加和删除几列

<html><head><script language="javascript" type="text/javascript">function funAddCol(){ var objTab = document.getElementById("test_tab"); for(var i=0;i<objTab.rows.length;i++) { var col = objTab.rows[i].insertCell(); col.innerText = objTab.rows[i].cells.length; }}function funDelCol(){ var objTab = document.getElementById("test_tab"); for(var i=0;i<objTab.rows.length;i++) { objTab.rows[i].deleteCell(); }}</script></head><body><table border id="test_tab"><tr><td>1</td></tr><tr><td>1</td><tr><td>1</td></tr><tr><td>1</td></tr></table><input type="button" value="新增列" onclick="funAddCol();" /><input type="button" value="删除列" onclick="funDelCol();" /></body></html>

⑵ 使用javascript 加上两个按钮，实现动态添加和删除表格操作

最简单的方法，在你需要添加表格的地方，弄个Div，将你要添加的表格使用InnerHtml的方式直接扔到div里面去，点击删除的话，再从Div里面移除出去就是了，如果不喜欢的话，还有CreateElement的方法可以使用都可以实现你的目的。不过有个问题就是，你要动态添加表格的话，可以添加多少个？
如果是多个的话，你那个删除按钮怎么处理，你需要删除的东西，需要考虑清楚啊

⑶ js如何删除一个td的style

这个要看你要设置style里的什么属性了。
首先给td一个ID名称。比如：
<td id="TD1" style="display:none;">XXXXX<td>
可以在页面的<tiltle></title>的下方加入：
<script>
document.all.TD1.style.display='';
</script>
这样就改变了TD1的隐藏状态。其他属性也一样的原理。

⑷ 用js设计添加和删除按钮来控制输入框

<html>
<head>
<title> </title>
<style type="text/css">
td,th{border:1px solid gray; }
td,input{font:35px 宋体;}
input{width:80px;}
</style>
<script type="text/javascript">
function addRow(){
var obj = document.getElementById("table");

var index = obj.rows.length-1;

//表格对象插入一行，并且返回行对象
var row = obj.insertRow(index);

//给行对象添加一个ID
row.id="row"+index;

//行对象插入一个单元格，并返回单元格对象
var td0 = row.insertCell(0);
// td0.cellIndex row.rowIndex
td0.innerHTML=row.rowIndex+" "+td0.cellIndex;
var td1 = row.insertCell(1);
td1.innerHTML=index+" "+td1.cellIndex;
var td2 = row.insertCell(2);
td2.innerHTML=index+" "+td2.cellIndex;
var td3 = row.insertCell(3);
// td3.innerHTML=index+" "+td3.cellIndex;
// alert(row.cells.length)

td3.innerHTML='<input type="button" value="删除" onclick="delRow(\''+row.id+'\')" />';

}

function delRow(id){

var obj = document.getElementById("table");
//得到要删除的行
var row = document.getElementById(id);
alert(row.rowIndex);
//根据行索引删除行
obj.deleteRow(row.rowIndex);

}
//删除一个单元格
function f()
{
var obj = document.getElementById("table");
var rows = obj.rows;
rows[0].deleteCell(0);
}
</script>
</head>
<body>
<table border="0" width="80%" id="table" cellspacing="0" cellpadding="0" height="50%" style="font-size:50px">
<tr class="tr1">
<th width="30%">商品名称</th>
<th width="20%">数量</th>
<th width="20%">价格</th>
<th width="30%">操作</th>
</tr>
<tr id="row1">
<td>仿真休闲皮鞋</td>
<td >12</td>
<td>￥168.0</td>
<td>
<input type="button" value="删除" onclick="delRow('row1')" />
</td>
</tr>
<tr id="row2">
<td>白金项链</td>
<td>2</td>
<td>￥156.0</td>
<td>
<input type="button" value="删除" onclick="delRow('row2')"/>
</td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" value="增加" onclick="addRow()"/>
</td>
</tr>
</table>
<input type="button" value="click" onclick="f()">
</body>
</html>

⑸ JS如何添加行和删除行

<!DOCTYPE html>

<head>

$(document).ready(function(){

var spotMax = 30;

if($('div.spot').size() >= spotMax) {$(obj).hide();}

$("input#add").click(function(){ addSpot(this, spotMax);

});

function addSpot(obj, sm) {

$('div#spots').append(

'<div>' +

'<span><input name="shengfen" type="text" /></span>'+

'<span><input name="diqu" type="text" /></span>'+

'<input type="button" class="remove spot01" value="删除行" /></div>')

.find("input.remove").click(function(){

$(this).parent().remove();

$('input#add').show();

});

if($('div.spot').size() >= sm) {$(obj).hide();}

};

</script>

</head>

<body>

<div>

</div>

</body>

</html>

效果这样（样式再自己调）

不懂再追问

⑹ 求教如何JS删除HTML内TR/TD标签内容(没有ID值)比如<td>标签</td>....

<inputid="Button1"type="button"value="删除"onclick="del()"/>
functiondel(){
vartab=document.getElemntsByTagName("table")[0];//最好给table指定个id
for(vari=0;i<tab.rows.length;i++){
for(varj=0;j<tab.rows[i].cells.length;j++)[
varobj=tab.rows[i][j].getElementsByTagName("input")[0];
if(obj!=null&&obj.type="checkbox"&&obj.checked=true){//你没说需求我就直接将第一行中有checkbox且为true的删除
vartr=obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
}
}
}

给你找个实例从中领悟精髓吧

⑺ js动态添加、删除html代码

⑻ js删除td列的内容

那个代码中的这段
<div align="center"><div id=AdRotator></div><input id="second"><button onClick="adRotator.set(getRef('second').value)">set time</button></div>

这是显示的层把它放到TD里面就可以了

原先代码中的这段要删除

不要等待提示就把这段代码
getRef(_o).innerHTML="total images " + _p.length + ", loading picture " + _c + ' ' + _i.readyState + "...";
_timeout=window.setTimeout(adRotator.load,10)
}
}
else
{
getRef(_o).innerHTML="total images " + _p.length + ", loading picture " + _c + ' ' + _i.readyState + "...";
_timeout=window.setTimeout(adRotator.load,10)

改成：

getRef(_o).innerHTML="";
_timeout=window.setTimeout(adRotator.load,10)
}
}
else
{
getRef(_o).innerHTML="";
_timeout=window.setTimeout(adRotator.load,10)

就可以了
其实就是把getRef(_o).innerHTML="";的值给空不给他赋值，统计还在工作但是不会显示了。

⑼ js怎么实现增加和删除一行内容问题见详细！！！

<html>
<table border="1" cellpadding="0" cellspacing="0" id="tabTravelDetail">
<tr>
<td width="10%">
<span name="day" value="1" group="travelDetail" key="day">第1天</span>
</td>
<td width="20%">
标题：
<input type="text" group="travelDetail" key="title" />
</td>
<td width="25%">
描述：
<textarea id="TextArea1" cols="20" rows="2" style="width: 600px; height: 100px;"
group="travelDetail" key="description"></textarea>
</td>
<td width="10%" align="center">
<input type="button" value=" + " onclick="AddTr(this);" key="1" />
</td>
</tr>
</table>
<table id="tmpTrvael" style="display: none">
<tr>
<td width="10%">
<span name="day" value="1" group="travelDetail" key="day"></span>
</td>
<td width="20%">
标题：
<input type="text" group="travelDetail" key="title" />
</td>
<td width="25%">
描述：<textarea id="TextArea2" cols="20" rows="2" style="width: 400px; height: 100px;"
group="travelDetail" key="description"></textarea>
</td>
<td width="10%" align="center">
<input type="button" value=" - " onclick="RemoveTr(this);" />
</td>
</tr>
</table>
<html>
<script>
//追加行程
function AddTr(obj) {
$("#tabTravelDetail").append($("#tmpTrvael").html());
}
//移除详细行程
function RemoveTr(obj) {
$(obj).parent().parent().remove();
}
</script>

你建一个html,把我的代码粘进去，就能运行

导航:首页 > 编程语言 > js添加和删除td

js添加和删除td

与js添加和删除td相关的资料

友情链接