js中如何动态给一个表格中的某一个单元格添加一个超链接作为单元格内容？

思路：获取行对象→获取列对象→使用innerHTML为单元格添加超链接内容，实例演示如下：

1、HTML结构

<table id = "test">

<tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>

<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>

<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>

<tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>

</table>

第<input type="text" id="row">行第<input type="text" id="col">列<input type='button' value='确定' onclick="fun()"/>

2、javascript代码

function fun(){

row = document.getElementById("row").value - 1

col = document.getElementById("col").value - 1

tr = document.getElementById("test").getElementsByTagName("tr")

td = tr[row].getElementsByTagName("td")[col]

td.innerHTML = "<a href='#'>超链接</a>"

}

3、效果演示

function showtable(){

var tableid='table' //表格的id

var overcolor='#ffffff' //鼠标经过颜色

var color1='#F6FAFF' //第一种颜色

var color2='#F6FAFF' //第二种颜色

var tablename=document.getElementById(tableid)

var tr=tablename.getElementsByTagName("tr")

for(var i=1 i<tr.lengthi++){

tr[i].onmouseover=function(){

this.style.backgroundColor=overcolor

}

tr[i].onmouseout=function(){

if(this.rowIndex%2==0){

this.style.backgroundColor=color1

}else{

this.style.backgroundColor=color2

}

}

if(i%2==0){

tr[i].className="color1"

}else{

tr[i].className="color2"

}

}

}

onloadEvent(showtable)

链接的话给表格的每行加个a标签就地

最近项目的原型设计中有这样一个需求，在表格中插入一个步骤条，先贴一张完成的图片，效果如下：

    开始做的时候，查看了一下element官方文档（传送门： Element官方文档 ），官方文档中只有一些比较基本的样式，例如：描述的步骤条、带图标的步骤条等，这里就不一一赘述了。

    首先，在表格中加入插槽，插入步骤条组件

使用表格的cellStyle属性，设置步骤条一列对齐方式为左

    在步骤条组件上绑定class，根据当前列中步骤条进度分别给“已完成”、“进行中”、“未开始”三种状态的步骤条赋上对应的类样式，js方法如下：

css样式如下， 切记修改element组件原样式的时候需要建立一个style标签，去掉scoped，并在element组件外层用一个父元素包含起来，缺前者设置会不生效，缺后者会影响全局样式。

这里我是将步骤条原样式中的数字颜色改成透明，分别设置三种状态的圆圈大小及背景色，然后用.el-step__icon类设置定位，用 .el-step.is-horizontal .el-step__line设置步骤条横线的粗细及位置，根据具体表格的对应列宽高来设置就好啦。

---