文章目录
一、标签创建
1.1 直接创建tr/td
<body>
<div id="test">
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</div>
</body>
<script type="text/javascript">
// id获取元素简写
function $(id){
return document.getElementById(id);
}
var tbody = $("tbody");
// 创建行，长度为tr.length。
for(var i = 0; i < tr.length; i++){
var tr = document.createElement("tr");
// 创建列，创建td.length列，每列长度为1。
for(var j = 0; j < td.length; j++){
var td = document.createElement("td");
// 单元格内加入内容content
td.innerHTML = content;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
</script>
1.2 直接创建table
<body>
<div id="test"></div>
</body>
<script type="text/javascript">
// id获取元素简写
function $(id){
return document.getElementById(id);
}
// 在id = test的元素内尾部，创建8行3列的表格。
$("test").appendChild(createTable(8, 3));
// 创建table表格功能函数
function createTable(rowslength, cellslength){
var table = document.createElement("table");
var tr,td;
for(var i=0;i<rowslength;i++){
tr = table.insertRow(table.rows.length);
for(var j=0;j<cellslength;j++){
td = tr.insertCell(tr.cells.length);
// 创建单元格同时，插入内容。
td.innerHTML = "<a href='http://www.baidu.com' title='百度'>百度</a>";
}
}
return table;
}
</script>
二 、标签增加
2.1 行——appendChild + insertRow
function $(id){
return document.getElementById(id);
}
// 方法一
var tr = document.createElement("tr");
for(var i = 0; i < 3; i++){
var td = document.createElement("td");
td.innerHTML = "<a href='http://www.baidu.com' title='百度'>百度123</a>";
tr.appendChild(td);
}
$("test").getElementsByTagName("table")[0].appendChild(tr);
// 方法二：$("tbody").insertRow(i)。在第(i-1)行增加行。
$("add").onclick = function(){
var tr = $("tbody").insertRow();
tr.insertCell(0).innerHTML = $("name").value;
tr.insertCell(1).innerHTML = $("age").value;
tr.insertCell(2).innerHTML = $("blog").value;
}
2.2 列——appendChild + insertCell
for(var i = 0; i < 8; i++){
var td = document.createElement("td");
$("test").getElementsByTagName("tr")[i].appendChild(td);
td.innerHTML = "<a href='http://www.baidu.com' title='百度'>百度123</a>";
}
三、标签删除
3.1 行
3.1.1 remove()
语法：tr对象[索引值].remove()
$("test").getElementsByTagName("tr")[index].remove();
3.1.2 deleteRow()
语法：父对象.deleteRow(索引值)
$("tbody").deleteRow(2);
3.2 列
3.2.1 remove()
语法：td对象[索引值].remove()
for(var i = 0; i < 8; i++){
$("test").getElementsByTagName("tr")[i].getElementsByTagName("td")[2].remove();
}
3.2.2 deleteCell()
语法：父对象.deleteCell(索引值)
$("tbody").rows[1].deleteCell(2);
四、内容替换
// 获取第三行第二列的单元格。
var td = $("test").getElementsByTagName("tr")[2].getElementsByTagName("td")[1];
// 第三行第二列替换成小百度
td.innerHTML = "小百度";
// 第三行第二列替换成小百度改成红色
td.style.color = "red";
// 第三行第二列替换成小百度,修改样式为changeColor
td.className = "changeColor";
// 第三行第二列替换成小百度,增加样式为changeColor
td.classList.add("changeColor");
五、获取
5.1 行数
语法：父对象.rows.length
$("tbody").rows.length
语法：对象.length
$("test").getElementsByTagName("tr").length
5.2 列数
语法：父对象.cells.length
$("tbody").rows[0].cells.length
语法：对象.length
$("test").getElementsByTagName("tr")[2].getElementsByTagName("td").length
5.3 单元格内容
语法：祖对象.rows[索引值].cells[索引值].innerHTML
$("tbody").rows[0].cells[0].innerHTML
语法：对象.length
$("test").getElementsByTagName("tr")[2].getElementsByTagName("td")[0].innerHTML
2182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
