js表格（创建，换色，点击）

最新推荐文章于 2021-08-11 21:09:43 发布
最新推荐文章于 2021-08-11 21:09:43 发布
阅读量761 收藏
点赞数
分类专栏： 老文章 文章标签： button table function input fun border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu904139492/article/details/7441298
版权

<html>
<script>
function aa()
{
 var table = document.createElement("table");
 table.border="1";
 var tbody = document.createElement("tbody");

//row1

 var tr = document.createElement("tr");
 var td = document.createElement("td");
 td.rowSpan="2";
 td.innerHTML="a";
 tr.appendChild(td);

 var td=document.createElement("td");
 td.colSpan="2";
 td.innerHTML="b";
 tr.appendChild(td);

 //var td=document.createElement("td");
 //td.innerHTML="c";
 //tr.appendChild(td);

 var td=document.createElement("td");
 td.innerHTML="d";
 tr.appendChild(td);

 tbody.appendChild(tr);

//row2

 var tr = document.createElement("tr");
 //var td = document.createElement("td");
 //td.innerHTML="a";
 //tr.appendChild(td);

 var td=document.createElement("td");
 td.innerHTML="b";
 tr.appendChild(td);

 var td=document.createElement("td");
 td.innerHTML="c";
 tr.appendChild(td);

 var td=document.createElement("td");
 td.innerHTML="d";
 tr.appendChild(td);

 tbody.appendChild(tr);

//row3
 
 var tr = document.createElement("tr");
 var td = document.createElement("td");
 td.innerHTML="a";
 tr.appendChild(td);

 var td=document.createElement("td");
 td.innerHTML="b";
 tr.appendChild(td);

 var td=document.createElement("td");
 td.innerHTML="c";
 tr.appendChild(td);

 var td=document.createElement("td");
 td.innerHTML="d";
 tr.appendChild(td);

 tbody.appendChild(tr);

//row4

 var tr = document.createElement("tr");
 var td = document.createElement("td");
 td.innerHTML="a";
 tr.appendChild(td);

 var td=document.createElement("td");
 td.innerHTML="b";
 tr.appendChild(td);

 var td=document.createElement("td");
 td.innerHTML="c";
 tr.appendChild(td);

 var td=document.createElement("td");
 td.innerHTML="d";
 tr.appendChild(td);

 tbody.appendChild(tr);

 table.appendChild(tbody);
 document.body.appendChild(table);

}


function m()
{
var oradio = document.getElementsByName("n1");
for(var i=0;i<oradio.length;i++)
{
 if(oradio[i].checked)
 {
  alert(oradio[i].nextSibling.nodeValue);
  break;
 }
}
}


function c()
{

 

}

</script>
<body οnlοad="aa();">
<input type="radio" name="n1" />男
<input type="radio" name="n1" />女
<input type="button" value="显示男女" οnclick="m()"/>
<input type="button" value="变化颜色" οnclick="document.getElementById('tab1').childNodes[0].lastChild.lastChild.style.backgroundColor='green';"/>
</body>
</html>

 

 

 

 

 

 

 

 

 

<html>
<head>
<title>
</title>
<style>
.cl1{
    color:red;
}
</style>
<script>
function aa()
{
    var otable = document.createElement("table");
    otable.id = "tab1";
    otable.border = "1";
    var otbody = document.createElement("tbody");
    var otr = document.createElement("tr");
    var otd = document.createElement("td");
    otd.rowSpan = "2";
    otd.style.backgroundColor = "blue";
    otd.innerHTML = "a";
    otr.appendChild(otd);
    otd = document.createElement("td");
    otd.colSpan = "2";
    otd.style.backgroundColor = "#e1e2e3";
    otd.innerHTML = "b";
    otr.appendChild(otd);
    //otd = document.createElement("td");
    //otd.innerHTML = "c";
    //otr.appendChild(otd);
    otbody.appendChild(otr);


    otr = document.createElement("tr");
    //otd = document.createElement("td");
    //otd.innerHTML = "a";
    //otr.appendChild(otd);
    otd = document.createElement("td");
    otd.innerHTML = "b";
    otr.appendChild(otd);
    otd = document.createElement("td");
    otd.className = "cl1";
    otd.innerHTML = "<input type='radio' id='m1' name=\"n1\"/>男<input type=\"radio\" id='m2' name='n1' />女";
    otr.appendChild(otd);
    otbody.appendChild(otr);
 
    otr = document.createElement("tr");
    otd = document.createElement("td");
    otd.innerHTML = "a";
    otr.appendChild(otd);
    otd = document.createElement("td");
    otd.innerHTML = "b";
    otr.appendChild(otd);
    otd = document.createElement("td");
    otd.innerHTML = "c";
    otr.appendChild(otd);
    otbody.appendChild(otr);     

    otable.appendChild(otbody);
    document.body.appendChild(otable);

    //alert(document.getElementById("table1").outerHTML);
}
function fun_check()
{
   //var oradio = document.getElementsByName("n1");
   var oradio = [document.getElementById('m1'),document.getElementById('m2')];
   for(var i = 0; i<oradio.length;i++)
   {
        if(oradio[i].checked)
        {
           alert(oradio[i].nextSibling.nodeValue);
           break;
         }
    }
}
function fun_fun()
{
    for(var i=0;i<1000;i++)
    {
          document.getElementById("errorWatch").innerText += i+"<br/>";
          if(i==800)
          {
               aa.aa.aa;
           }
    }
}
var strtable = "<table border='1'><tr><td>1</td><td>2</td><td>3</td></tr></table>";
</script>
</head>
<body>
<div style="width:400px;height:200px;overflow:auto;background-color:gray;" id="errorWatch"></div>
<input type="button" value="x_error" οnclick="fun_fun();" />
<input type="button" value="inner" οnclick="document.getElementById('idn').innerHTML = strtable;"/>
<div id="idn"></div>
<input type="button" value="outerText" οnclick="alert(document.body.outerText)" />
<input type="button" value="innerText" οnclick="alert(document.body.innerText)" />
<input type="button" value="outerHTML" οnclick="alert(document.body.outerHTML)" />
<input type="button" value="innerHTML" οnclick="alert(document.body.innerHTML)" />
<input type="text" value="123" disabled/>
<input type="text" value="123" style="color:gray" readOnly/>
<input type="button" value="setValue" οnclick="document.getElementById('tab1').setAttribute('sName','123');"/>
<input type="button" value="getValue" οnclick="alert(document.getElementById('tab1').getAttribute('sName'));" />
<input type="button" οnclick="document.getElementById('tab1').childNodes[0].lastChild.lastChild.style.backgroundColor = 'green';" value="setcolor" />
<table border="1" id="table1">
<tr><td rowspan="2" colspan="2" class="cl1">a</td><td>b</td><td>c</td></tr>
</table>
<button οnclick="fun_check();">aaa</button>
<input type="button" value="button" οnclick="aa();" />
</body>
</html>

 

刘德志doubleKill
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现点击表格随机变色
qq_55786319的博客
03-12 1872
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> function setcolor(a){ var colorname=['yellow','blue','darkred','green','purple','gray','orange']; var n=Math.floor(Math.r.
js表格三色循环
05-30
表格的三种颜色循环
js实现表格变色点击行颜色改变
xiaodanjava的专栏
10-21 8119
 forword http://blog.csdn.net/cai7095576/article/details/21808445 js实现表格变色点击行颜色改变 [html] view plain copy print? HTML>       HEAD>       META   http-equiv="Content-Type"   co
笔记——document.createElement创建添加属性
热门推荐
shiki0083的笔记
05-16 3万+
动态添加div中，需要进行添加id，class，style等属性做下记录[javascript] view plain copyvar div = document.createElement('div');  div.id = 'mask_div1';  div.className = 'mask';  div.appendChild(document.createTextNode("test"...
JavaScript DOM操作之表格操作(2)
u014661569的专栏
05-22 342
/** *DOM操作表格--(添加删除元素) *是在tBodies里面添加元素 */ HTML文件代码       domTableOperate.html                     NAME:   AGE:       ID NAME AGE OPERATE 1 t
js HTML中表格的增加和删除
liuzong_dage的博客
11-10 3031
&lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;&lt;/title&gt;     &lt;script type="text/javascript"&gt;         window.onload=function(){             var otx1=document.getElementBy
JS实现隔行换色的表格排序
10-20
总结来说，实现JS隔行换色的表格排序涉及到了DOM操作、数据解析、事件处理、CSS样式应用以及数据排序算法等多个核心JavaScript知识点。通过掌握这些技术，你可以创建交互性强、用户体验良好的数据展示表格。
jQuery展示表格点击变色、全选、删除
10-20
当用户点击表格的某一行时，该行的背景色会改变，这样可以清晰地标识出用户当前的选择。在给出的代码中，使用了jQuery的`click`事件监听器，并通过切换`backgroundColor`属性来实现这个功能。当行的背景色为默认的...
js兼容标准的表格变色效果
10-30
这段代码实现了一个JavaScript兼容标准的表格变色效果。在网页中，用户可以通过点击"gray"或"green"按钮来改变表格的背景颜色。下面详细解释其中涉及的技术和知识点： 1. **HTML 结构**： - `<!DOCTYPE html>`：...
vue.js韩语字母变色表格特效
07-24
在这个"vue.js韩语字母变色表格特效"项目中，开发者利用Vue.js的特性创建了一个互动的学习工具，旨在帮助用户更有趣地学习韩语字母。 1. **Vue.js组件化**：Vue.js的核心设计理念之一是组件化，它允许我们将UI拆...
javascript表格隔行变色加鼠标移入移出及点击效果的方法
12-11
本文主要探讨了如何使用JavaScript实现表格隔行变色、鼠标移入移出以及点击效果，以增强表格的可读性和用户的操作体验。 首先，隔行变色是一种常见的视觉分隔技巧，它有助于用户在查看大量数据时避免混淆行与行之间...
js 生成表格及其颜色
weixin_30496431的博客
05-10 528
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <script> ...
如何实现js的红绿灯切换
凡友福老师的博客
08-11 1341
描述 红绿灯循环切换。绿灯2秒，黄灯5秒，红灯3秒，再循环。 素材： const green = () => { console.log(Date.now(),'green') } const yellow= () => { console.log(Date.now(),'yellow') } const red = () => { console.log(Date.now(),'red')
js在指定tr后面添加tr
凌晨de太阳
08-27 1万+
方法（1）此方法不能在制定的位置添加       "javascript">   var table = document.getElementById("table_id");  var tr = table.insertRow();  for(var i=0; i  var td = tr.insertCell(i);    td.innerText = i;  }      "t
JS-生成表格和颜色-JSON对象用forin循环
dxm809的博客
02-11 359
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset="utf-8" /&gt;     &lt;title&gt;&lt;/title&gt;     &lt;script&gt;         var list = [             { id: '1', country: '中
js输出7的倍数或者和带有7的数字（1-100之间）
liu904139492的专栏
04-09 2万+
function met() {  var str="";  for(var i=1;i  {   if(i%7==0)   {    str=str+"-"+i;   }else if(i69){    str=str+"-"+i;   }else if(i==7||i==17||i==27||i==37||i==47||i==57||i==67||i==87||i==97)
什么是模式化？
liu904139492的专栏
03-07 1万+
模式化的过程是把问题抽象化，在忽略到不重要的细节后，发现问题的一般性本质，并找到普遍适用的解决方案的过程。 问题抽象画后应具备的要素(模式的要素)： 1 名字（name）：一个模式必须有一个有意义的，简短而准确的名字。一个好的名字可以使对模式的抽象讨论变得更容易。有时一个模式有多于一个的名字，这时候，这些名字就应该当做别名列出。 2 问题(Problem)：每一个模式必须有一个能够描述它用意
java类什么时候被加载
liu904139492的专栏
08-09 8646
类什么时候被加载/类加载时机： 第一：生成该类对象的时候，会加载该类及该类的所有父类； 第二：访问该类的静态成员的时候； 第三：class．forName("类名")；
HTML常用标签（点击隐藏实例）
liu904139492的专栏
04-05 5469
function f_sex(obj){     if(obj.checked==true)      document.getElementById("tr1").style.display="none";     else      document.getElementById("tr1").style.display="block";    }    function f_em
原生JavaScript实现简易Datagrid表格教程：功能与示例
本文档详细介绍了如何使用原生JavaScript实现一个简单的数据表格（Datagrid）功能。Datagrid是一种常见的前端展示大量数据的组件，常用于表格数据的展示、排序、编辑、筛选和分页等功能。以下将逐步探讨实现这些功能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值