Javascript更改/迁移/操纵HTML表格（Table）内容案例（备选表格案例）

Posted 2022-01-31 狱典司

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript更改/迁移/操纵HTML表格（Table）内容案例（备选表格案例）相关的知识，希望对你有一定的参考价值。

大概记得这个内容搜起来有点点费劲，于是就放在博客上随时可以查看。

实现操纵html表格数据的JS函数：

<script>

function regFunction()
    var index = new Array();
    var index_num = 0;
    var tab_row = 2;
    var colLen = 4;

    var course1 = new Array();
    var course2 = new Array();

    for(var i=0; i<f.chk.length+2 ;i++)
        if(f.chk[i].checked == true)
            if(index_num == 2)
                alert("助教任职申请数不能超过两门课程！");
                index_num = 0;
                index = new Array;
                break;
            
            index[index_num] = i+2;
            //alert(index_num+"---"+index[index_num]+" : "+ document.getElementById('courseTab').rows[index[index_num]].cells[1].innerText +" is selected");

            if(tab_row == 2)
                document.getElementById("tab").rows[tab_row].cells[0].innerText="第一志愿";
            else
                document.getElementById("tab").rows[tab_row].cells[0].innerText="第二志愿";
            

            for(var j=1; j <= colLen; j++)
                var tmp = document.getElementById('courseTab').rows[index[index_num]].cells[j].innerText;
                document.getElementById("tab").rows[tab_row].cells[j].innerText = tmp;
            
            tab_row++;
            index_num++;
        
    
    //alert('OUT:'+index[0]+" : "+ document.getElementById('courseTab').rows[index[0]].cells[1].innerText +" is selected");


function myFunction()
alert("更改志愿次序");
    if(document.getElementById("tab").rows[2].cells[0].innerText == '第一志愿')
        document.getElementById("tab").rows[2].cells[0].innerText = '第二志愿';
        document.getElementById("tab").rows[3].cells[0].innerText = '第一志愿';
    else
        document.getElementById("tab").rows[2].cells[0].innerText = '第一志愿';
        document.getElementById("tab").rows[3].cells[0].innerText = '第二志愿';
    


function quitFunction(button)
     var index  = -1;
     for(var i=0; i<fm.but.length+2 ;i++)
       if(fm.but[i] == button)
         index = i+fm.but.length;
         break;
       
     

    var collen = 5;
    var i = 0;
    for(i = 0; i < collen; i++)
        document.getElementById("tab").rows[index].cells[i].innerText = '';
    

</script>

完整源码(demo 案例)

<!DOCTYPE html>
<html>
<head>
  <title>操作表格</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

  <style>
ul.tools 
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;


li a 
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;


a:link text-decoration:none;    /* unvisited link */
a:visited text-decoration:none; /* visited link */

li a.active 
    background-color: #4CAF50;
    color: white;
    text-decoration: none;


li a:hover:not(.active) 
    background-color: #555;
    color: white;
    text-decoration: none;

</style>


<script>

function regFunction()
    var index = new Array();
    var index_num = 0;
    var tab_row = 2;
    var colLen = 4;

    var course1 = new Array();
    var course2 = new Array();

    for(var i=0; i<f.chk.length+2 ;i++)
        if(f.chk[i].checked == true)
            if(index_num == 2)
                alert("助教任职申请数不能超过两门课程！");
                index_num = 0;
                index = new Array;
                break;
            
            index[index_num] = i+2;
            //alert(index_num+"---"+index[index_num]+" : "+ document.getElementById('courseTab').rows[index[index_num]].cells[1].innerText +" is selected");

            if(tab_row == 2)
                document.getElementById("tab").rows[tab_row].cells[0].innerText="第一志愿";
            else
                document.getElementById("tab").rows[tab_row].cells[0].innerText="第二志愿";
            

            for(var j=1; j <= colLen; j++)
                var tmp = document.getElementById('courseTab').rows[index[index_num]].cells[j].innerText;
                document.getElementById("tab").rows[tab_row].cells[j].innerText = tmp;
            
            tab_row++;
            index_num++;
        
    
    //alert('OUT:'+index[0]+" : "+ document.getElementById('courseTab').rows[index[0]].cells[1].innerText +" is selected");


function myFunction()
alert("更改志愿次序");
    if(document.getElementById("tab").rows[2].cells[0].innerText == '第一志愿')
        document.getElementById("tab").rows[2].cells[0].innerText = '第二志愿';
        document.getElementById("tab").rows[3].cells[0].innerText = '第一志愿';
    else
        document.getElementById("tab").rows[2].cells[0].innerText = '第一志愿';
        document.getElementById("tab").rows[3].cells[0].innerText = '第二志愿';
    


function quitFunction(button)
     var index  = -1;
     for(var i=0; i<fm.but.length+2 ;i++)
       if(fm.but[i] == button)
         index = i+fm.but.length;
         break;
       
     

    var collen = 5;
    var i = 0;
    for(i = 0; i < collen; i++)
        document.getElementById("tab").rows[index].cells[i].innerText = '';
    

</script>
</head>
<body>



    <form method="post" action="" name="f">
	<div class="pre-scrollable">
    <table class="table table-bordered" id="courseTab" >
	<thead>
    <tr>
          <th colspan="10" style="vertical-align: middle;text-align: center;">选课列表</th>
    </tr>
    <tr>
            <th>是否选课</th>
            <th>学科ID</th>
            <th>课程ID</th>
            <th>课程名称</th>
            <th>任课老师</th>
            <th>课程性质</th>
            <th>授课对象</th>
            <th>选课人数</th>
            <th>学分</th>
            <th>学时</th>
    </tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="checkbox" name="chk"> </td>
			<td>k001</td>
			<td>c666</td>
            <td>数据结构</td>
            <td>A</td>
            <td>必修</td>
            <td>大一学生</td>
            <td>256</td>
            <td>4</td>
			<td>56</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="chk"> </td>
			<td>k002</td>
			<td>c888</td>
            <td>计算机组成原理</td>
            <td>B</td>
            <td>必修</td>
            <td>大一学生</td>
            <td>243</td>
            <td>4</td>
			<td>48</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="chk"> </td>
			<td>K003</td>
			<td>c999</td>
            <td>操作系统</td>
            <td>C</td>
            <td>必修</td>
            <td>大二学生</td>
            <td>257</td>
            <td>4</td>
			<td>60</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="chk"> </td>
			<td>K004</td>
			<td>C985</td>
            <td>计算机网络</td>
            <td>D</td>
            <td>必修</td>
            <td>大二学生</td>
            <td>221</td>
            <td>6</td>
			<td>68</td>
		</tr>
	<tr>
			<td>以上是关于Javascript更改/迁移/操纵HTML表格（Table）内容案例 （备选表格案例）的主要内容，如果未能解决你的问题，请参考以下文章 
 JavaScript 使用DOM操纵样式表
 Javascript：更改表格行 HTML
 HTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值
 JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强
 javascript 操纵html（DOM和JQuery）
 如何在单击时更改 HTML 表格单元格颜色

Javascript更改/迁移/操纵HTML表格（Table）内容案例 （备选表格案例）

目录

实现操纵html表格数据的JS函数：

完整源码(demo 案例)

Javascript更改/迁移/操纵HTML表格（Table）内容案例（备选表格案例）