使用JS实现table里面td内容的更改

JavaScript07

使用JS实现table里面td内容的更改,第1张

1、首先根据图示全部代码新建html文件。

2、然后根据图示全部代码创建三行两列的表格。

3、然后根据图示全部代码创建按钮。

4、然后根据图示全部代码创建js函数。

5、然后根据图示全部代码获取表格第一行。

6、然后根据图示全部代码更改第一行第一个单元格的内容。

7、然后根据图示全部代码给按钮添加js函数事件。

8、预览效果如图显示出了table。

9、点击按钮,第一行第一个单元格的内容更改,即代表成功实使用JS实现table里面td内容的更改。

这样?

<script>

window.onload = function(){

    var obj = document.getElementById("table1")

    var arr = []

    var lines = []

    var rows = obj.tBodies[0].rows

    for(var i = 0 i < rows.length i++){

        var str = rows[i].cells[0].innerHTML

        if(arr.length){

            for(var j = 0 j < arr.length j++){

                if(arr[j] == str){

                    lines.push("\n行:" + j + " - " + i)

                }

            }

        }

        arr.push(rows[i].cells[0].innerHTML)

    }

    alert("相同内容的行为:" + lines.join())

}

</script>

js动态改变元素内容分两步。

选择器确定好这个元素,不管是用document.getElementById("id")还是其他的都可以.

第二、确定好元素了,只要知道某种标签对应值是哪个属性控制的。只需要改一下对应属性值就可以了。拿你说的td元素来说,里面的内容对应的属性是innerText()。

所以可以使用document.getElementById("td的id值").innerText("想要修改为的值")即可。

希望能够帮助到您,谢谢。