js动态修改表格行colspan列跨度的方法

 更新时间:2015年03月30日 11:13:50   作者:欧阳不疯  
这篇文章主要介绍了js动态修改表格行colspan列跨度的方法,实例分析了javascript动态修改html中table属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js动态修改表格行colspan列跨度的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html>
<html>
<head>
<script>
function setColSpan()
{
var x=document.getElementById('myTable').rows[0].cells;
x[0].colSpan="2";
x[1].colSpan="6";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td colspan="4">cell 1</td>
<td colspan="4">cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
<td>cell 7</td>
<td>cell 8</td>
<td>cell 9</td>
<td>cell 10</td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan()" 
value="Change colspan">
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

  • JavaScript中fetch()用法实例

    JavaScript中fetch()用法实例

    在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,下面这篇文章主要给大家介绍了关于JavaScript中fetch()用法的相关资料,需要的朋友可以参考下
    2022-06-06
  • Echarts之悬浮框中的数据排序问题

    Echarts之悬浮框中的数据排序问题

    Echarts非常强大,配置也非常的多,有很多细节需要深入研究。这篇文章主要介绍了Echarts之悬浮框中的数据排序问题,需要的朋友可以参考下
    2018-11-11
  • webstorm中vue语法的支持详解

    webstorm中vue语法的支持详解

    这篇文章主要介绍了webstorm中vue语法的支持详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • JS Replace 全部替换字符的用法小结

    JS Replace 全部替换字符的用法小结

    本篇文章主要是对JS Replace 全部替换字符的用法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript使用Canvas绘制一个验证码组件

    JavaScript使用Canvas绘制一个验证码组件

    验证码,这一日常伴随我们的要素,是我们在线交互的重要安全保障,你的手机短信里是否被它占据半壁江山,今天我们就来聊聊如何在网页上实现一个简单的验证码组件,需要的朋友可以参考下
    2023-09-09
  • JavaScript制作颜色反转小游戏

    JavaScript制作颜色反转小游戏

    本文给大家分享的是一个JavaScript实现的颜色反转的小游戏的源码,非常的简单好玩,有需要的小伙伴可以参考下
    2016-09-09
  • JavaScript DOM节点操作方法总结

    JavaScript DOM节点操作方法总结

    下面小编就为大家带来一篇JavaScript DOM节点操作方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript中的深复制详解及实例分析

    javascript中的深复制详解及实例分析

    这篇文章主要介绍了javascript中的深复制详解及实例分析的相关资料,需要的朋友可以参考下
    2016-12-12
  • js自定义瀑布流布局插件

    js自定义瀑布流布局插件

    这篇文章主要为大家详细介绍了瀑布流布局与自定义瀑布流布局插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • react-router-dom v6 通过outlet实现keepAlive 功能的实现

    react-router-dom v6 通过outlet实现keepAlive 功能的实现

    本文主要介绍了react-router-dom v6 通过outlet实现keepAlive功能,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论