HTML锁定Table中某一列

1.

2.

3.

1 function ChangeTable()

  2 {
  3     var type = document.getElementById("ddl_ReportType").value.Trim();
  4
  5     if (type == 1)
  6     {
  7         document.getElementById("TableInfo").innerHTML = TableYX();
  8     }
  9     else if (type == 2)
 10     {
 11         document.getElementById("TableInfo").innerHTML = TablePY();
 12     }
 13
 14     else if (type == 3)
 15     {
 16         document.getElementById("TableInfo").innerHTML = TableGL();
 17     }
 18     else if (type == 4)
 19     {
 20         document.getElementById("TableInfo").innerHTML = TableLG();
 21     }
 22 }
 23
 24 function TableGL()
 25 {
 26     var str = "<table name=‘tblSlt‘  width=‘100%‘ border=‘0‘  runat=‘server‘  align=‘center‘ cellpadding=‘0‘ cellspacing=‘1‘ bgcolor=‘#999999‘>";
 27     str += "    <tbody><tr>";
 28
 29     str += "    <td class=‘ListTitle‘ style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>项目名称</td>";
 30     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>原工资</td>";
 31     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>修改后工资</td>";
 32     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘></td>";
 33
 34     str += " </tr></tbody>";
 35     str += "    <tr>";
 36     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘>" +
 37                 "<select id=‘SltId‘ name=‘SltName‘  style=‘width:100%;‘> <option value=‘0‘ selected=‘selected‘>请选择</option>" +
 38                 " <option value=‘JBGZ_‘>工资</option> <option value=‘BLGZ_‘>保留工资</option> <option value=‘DTF_‘>独贴</option> " +
 39                 "<option value=‘MTF_‘>民贴</option>  <option value=‘QTY_‘>其他</option> <option value=‘KCBJ_‘>扣病事假</option>" +
 40                 "<option value=‘YLJ_‘>养老金</option> <option value=‘YBJ_‘>医保金</option> <option value=‘SBJ_‘>失保金</option>" +
 41                 "<option value=‘GJJ_‘>公积金</option> <option value=‘BFGJJ_‘>补充公积金</option> <option value=‘GHF_‘>工会费</option>" +
 42                 "<option value=‘QT_‘>其他</option> <option value=‘GTS_‘>个调税</option></select> </td>";
 43     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘><input type=‘text‘ maxlength = ‘12‘ style=‘width:100%;‘  class=‘tdinput‘ id=‘inputJBGZ‘ /></td>";  //onchange=\"AllUpdate(‘JBGZ‘)\"
 44     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘><input type=‘text‘ maxlength = ‘12‘ style=‘width:100%;‘  class=‘tdinput‘ id=‘inputJiangJ‘ /></td>" //onchange=\"AllUpdate(‘JiangJ‘)\"
 45     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘ align=‘center‘><input type=‘button‘  style=‘background:url(../../../images/Button/Button_Change.jpg); width:55px; Height:30px;‘ onclick =\"AllUpdate(‘JZZYBF‘)\"  id=‘JZZYBF‘ /></td>";
 46
 47     str += " </tr> ";
 48     str += "</table>";
 49     return str;
 50 }
 51
 52 function TableLG()
 53 {
 54     var str = "<table name=‘tblSlt‘  width=‘100%‘ border=‘0‘  runat=‘server‘  align=‘center‘ cellpadding=‘0‘ cellspacing=‘1‘ bgcolor=‘#999999‘>";
 55     str += "    <tbody><tr>";
 56
 57     str += "    <td class=‘ListTitle‘ style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>项目名称</td>";
 58     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>原工资</td>";
 59     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>修改后工资</td>";
 60     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘></td>";
 61
 62     str += " </tr></tbody>";
 63     str += "    <tr>";
 64     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘>" +
 65                 "<select id=‘SltId‘ name=‘SltName‘  style=‘width:100%;‘> <option value=‘0‘ selected=‘selected‘>请选择</option> " +
 66                 "<option value=‘JBGZ_‘>生活费</option> <option value=‘FTF_‘>社保金</option> " +
 67                 " <option value=‘CTF_‘>公积金</option><option value=‘DTF_‘>独贴</option> <option value=‘MTF_‘>民贴</option>" +
 68                 "<option value=‘QTY_‘>其他</option> <option value=‘YLJ_‘>养老金</option> <option value=‘YBJ_‘>医保金</option>" +
 69                 "<option value=‘SBJ_‘>失业金</option> <option value=‘GJJ_‘>公积金</option> <option value=‘QT_‘>其他</option> </select></td>";
 70     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘><input type=‘text‘ maxlength = ‘12‘ style=‘width:100%;‘  class=‘tdinput‘ id=‘inputJBGZ‘ /></td>";
 71     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘><input type=‘text‘ maxlength = ‘12‘ style=‘width:100%;‘  class=‘tdinput‘ id=‘inputJiangJ‘ /></td>"
 72     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘ align=‘center‘><input type=‘button‘  style=‘background:url(../../../images/Button/Button_Change.jpg); width:55px; Height:30px;‘ onclick =\"AllUpdate(‘JZZYBF‘)\"  id=‘JZZYBF‘ /></td>"
 73
 74     str += " </tr> ";
 75     str += "</table>";
 76     return str;
 77 }
 78
 79 function TableYX()
 80 {
 81     var str = "<table name=‘tblSlt‘  width=‘100%‘ border=‘0‘  runat=‘server‘  align=‘center‘ cellpadding=‘0‘ cellspacing=‘1‘ bgcolor=‘#999999‘>";
 82     str += "    <tbody><tr>";
 83
 84     str += "    <td class=‘ListTitle‘ style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>项目名称</td>";
 85     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>原工资</td>";
 86     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>修改后工资</td>";
 87     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘></td>";
 88
 89     str += " </tr></tbody>";
 90     str += "    <tr>";
 91     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘><select id=‘SltId‘ name=‘SltName‘  style=‘width:100%;‘>" +
 92                 " <option value=‘0‘ selected=‘selected‘>请选择</option> <option value=‘JBGZ_‘>工资</option> <option value=‘BLGZ_‘>保留工资</option> " +
 93                 " <option value=‘JiangJ_‘>奖金</option> <option value=‘JZZYBF_‘>加、值、中夜班费</option> <option value=‘DTF_‘>独贴</option> " +
 94                 "<option value=‘MTF_‘>民贴</option>  <option value=‘FTF_‘>饭贴</option> <option value=‘CTF_‘>车贴</option> " +
 95                 "<option value=‘QTY_‘>其他一</option> <option value=‘QTE_‘>其他二</option>  <option value=‘KCBJ_‘>扣病事假</option> " +
 96                 "<option value=‘YLJ_‘>养老金</option> <option value=‘YBJ_‘>医保金</option> <option value=‘SBJ_‘>失保金</option>" +
 97                 " <option value=‘GJJ_‘>公积金</option> <option value=‘BFGJJ_‘>补充公积金</option> <option value=‘GHF_‘>工会费</option>" +
 98                 "<option value=‘QT_‘>其他</option> <option value=‘GTS_‘>个调税</option> </select></td>";
 99     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘><input type=‘text‘ maxlength = ‘12‘ style=‘width:100%;‘  class=‘tdinput‘ id=‘inputJBGZ‘ /></td>";  //onchange=\"AllUpdate(‘JBGZ‘)\"
100     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘><input type=‘text‘ maxlength = ‘12‘ style=‘width:100%;‘  class=‘tdinput‘ id=‘inputJiangJ‘ /></td>" //onchange=\"AllUpdate(‘JiangJ‘)\"
101     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘ align=‘center‘><input type=‘button‘  style=‘background:url(../../../images/Button/Button_Change.jpg); width:55px; Height:30px;‘ onclick =\"AllUpdate(‘JZZYBF‘)\"  id=‘JZZYBF‘ /></td>";
102
103     str += " </tr> ";
104     str += "</table>";
105     return str;
106 }
107
109 function TablePY() {
110     var str = "<table name=‘tblSlt‘  width=‘100%‘ border=‘0‘  runat=‘server‘  align=‘center‘ cellpadding=‘0‘ cellspacing=‘1‘ bgcolor=‘#999999‘>";
111     str += "    <tbody><tr>";
112
113     str += "    <td class=‘ListTitle‘ style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>项目名称</td>";
114     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>原工资</td>";
115     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘>修改后工资</td>";
116     str += "    <td class=‘ListTitle‘  style=‘font-weight: bolder;width:50px;‘ background=‘../../../images/Main/tableTitle_bg.jpg‘></td>";
117
118     str += " </tr></tbody>";
119     str += "    <tr>";
120     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘> " +
121                 "<select id=‘SltId‘ name=‘SltName‘  style=‘width:100%;‘> <option id=‘selected‘ value=‘0‘ selected=‘selected‘>请选择</option>" +
122                 " <option value=‘JBGZ_‘>工资</option> <option value=‘JiangJ_‘>奖金</option>  <option value=‘JZZYBF_‘>加、值、中夜班费</option> " +
123                 "<option value=‘DTF_‘>午餐费</option> <option value=‘MTF_‘>晚餐费</option> <option value=‘FTF_‘>夜宵费</option> " +
124                 " <option value=‘QTY_‘>其他</option> <option value=‘KCBJ_‘>扣病事假</option> <option value=‘YLJ_‘>养老金</option>" +
125                 " <option value=‘YBJ_‘>医保金</option>  <option value=‘SBJ_‘>失保金</option> <option value=‘GJJ_‘>公积金</option> " +
126                 "<option value=‘QT_‘>其他</option> <option value=‘GTS_‘>个调税</option> </select></td>";
127     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘><input type=‘text‘ maxlength = ‘12‘ style=‘width:100%;‘  class=‘tdinput‘ id=‘inputJBGZ‘ /></td>";
128     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘><input type=‘text‘ maxlength = ‘12‘ style=‘width:100%;‘  class=‘tdinput‘ id=‘inputJiangJ‘ /></td>"
129     str += "    <td class=‘tdColInputCenter‘ style=‘font-weight: bolder;width:50px;‘ align=‘center‘><input type=‘button‘  style=‘background:url(../../../images/Button/Button_Change.jpg); width:55px; Height:30px;‘ onclick =\"AllUpdate(‘JZZYBF‘)\"  id=‘JZZYBF‘ /></td>";
130
131     str += " </tr> ";
132     str += "</table>";
133     return str;
134 }
135
136 function aa()
137 {
138     var a = document.getElementById("cc").scrollTop;
139     var b = document.getElementById("cc").scrollLeft;
140     document.getElementById("dd").scrollTop = a;
141     document.getElementById("hh").scrollLeft = b;
142 }
143
144 function AllUpdate()
145 {
146     var select = document.getElementById("SltId").value;
147
148    var table = document.getElementById("tblSalaryDetail");
149
150     var CountNum = 0;
151
152     var NowSal = document.getElementById("inputJBGZ").value.Trim();
153     var ModifedSal = document.getElementById("inputJiangJ").value.Trim();
154
155     if (table != null)
156     {
157         if (select == "0") //默认‘请选择‘的value值为‘0‘;
158         {
159             alert("请选择你需要修改的项目！");
160         }
161         else if (NowSal == "" && ModifedSal == "") {
162             alert("请在对应的位置，输入原工资和修改后的工资！");
163         }
164         else if (NowSal == "") {
165             alert("请输入原工资！");
166         }
167         else if (ModifedSal == "") {
168             alert("请输入修改后的工资！");
169         }
170         else
171         {
172             //获取表格行数
173             var tableCount = table.rows.length;
174
175             for (var row = 1; row < tableCount; row++) {
176                 var rowIndex = table.rows[row - 1];
177                 var textinput = rowIndex.getElementsByTagName("input");
178
179                 for (var i = 0; i < textinput.length; i++) {
180                     if (textinput[i].value == NowSal && (textinput[i].id.indexOf(select) > -1)
181                     {
182                         textinput[i].value = ModifedSal;
183                         CountNum++;
184                     }
185                 }
186                 CalculateTotalSalary("", row);
187             }
188
189             if (CountNum == 0) {
190                 alert("没有找到与你要求相符的数据 ！ \n 请您重新输入进行查找。");
191             }
192         }
193     }
194     else
195     {
196         alert("没有可更新的数据！");
197     }
198 }
时间： 2024-08-11 03:23:50

HTML锁定Table中某一列的相关文章

JavaScript实现获取table中某一列的值

JavaScript实现获取table中某一列的值 1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &

JavaScript获取table中某一列的值的方法

1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

【前端基础】统一修改table中某一列的值

一.需求 需求比较简单,就是先修改第一列中age下面的input中的值,然后点击age这个submit按钮,会将这一列中所有的值都修改称第一列中age对应的值,如上图所示: 二.实现 1.针对这个需求,我第一反应就是先获取第一列age这列对应的value,然后用这个值给其他行的这一列的value进行赋值:所以我的代码实现如下: <!DOCTYPE html> <html> <head> <title>test</title> </head&

关于页面中table中相同的列自动合并

代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type&qu

如何让Table中的第一列和第二列的值相乘然后赋值给第三列

因为需求的原因所以这样做,不废话了,直接上代码,我用的GridView绑定的数据,table也一样,因为GridView通过浏览器编译后的代码就是table.下面是aspx页面的Html代码: <asp:GridView ID="gv_new" runat="server" AutoGenerateColumns="False" CssClass="tb_data"                        Widt

封装Jquery 合并table中任何同列数据

封装代码: jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件 return this.each(function () { var that; $('tr', this).each(function (row) { $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) { if (that != null && $(this).h

layui table中添加一列序号列

页面文件在相应的位置上添加下面两个模块的代码: 第一模块:在render table 时添加: { field: 'rank', title: '序号', width: 80, sort: true, fixed: 'left', templet: '#rank' } 第二模块:在<script></script>一对标签外面添加: <script type="text/html" id="rank"> {{d.LAY_TABLE

React+antd table中的每列内容换行

1,效果图如下 2,分隔数组split(",") 3,详细代码代码如下 const leadsDetails = this.props.leadsDetails; const audits = JSON.stringify(leadsDetails) !== '[]' ? leadsDetails.audits : []; const auditsColumns = [ { title: '创建时间', dataIndex: 'created_at', key: 'created_at

Jquery Ajax 异步设置Table中某列的值

可根据table中某列中的ID去改变某列的值! JS: 1 $(document).ready(function () { 2 setTimeout(GetDate, 1000); 3 4 }); 5 6 function GetDate() { 7 $("#tbData tbody").find("tr").each(function () { 8 var prjectBalanceObj = $(this).find("td:eq(3)");