首页 > 代码库 > HTML锁定Table中某一列

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=http://www.mamicode.com/‘0‘ selected=‘selected‘>请选择" + 38                 " <option value=http://www.mamicode.com/‘JBGZ_‘>工资   " + 39                 "<option value=http://www.mamicode.com/‘MTF_‘>民贴   " + 40                 "<option value=http://www.mamicode.com/‘YLJ_‘>养老金  " + 41                 "<option value=http://www.mamicode.com/‘GJJ_‘>公积金  " + 42                 "<option value=http://www.mamicode.com/‘QT_‘>其他  "; 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=http://www.mamicode.com/‘0‘ selected=‘selected‘>请选择 " + 66                 "<option value=http://www.mamicode.com/‘JBGZ_‘>生活费  " + 67                 " <option value=http://www.mamicode.com/‘CTF_‘>公积金 " + 68                 "<option value=http://www.mamicode.com/‘QTY_‘>其他  " + 69                 "<option value=http://www.mamicode.com/‘SBJ_‘>失业金   "; 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=http://www.mamicode.com/‘0‘ selected=‘selected‘>请选择   " + 93                 " <option value=http://www.mamicode.com/‘JiangJ_‘>奖金   " + 94                 "<option value=http://www.mamicode.com/‘MTF_‘>民贴    " + 95                 "<option value=http://www.mamicode.com/‘QTY_‘>其他一    " + 96                 "<option value=http://www.mamicode.com/‘YLJ_‘>养老金  " + 97                 " <option value=http://www.mamicode.com/‘GJJ_‘>公积金  " + 98                 "<option value=http://www.mamicode.com/‘QT_‘>其他  "; 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=http://www.mamicode.com/‘0‘ selected=‘selected‘>请选择" +122                 " <option value=http://www.mamicode.com/‘JBGZ_‘>工资    " +123                 "<option value=http://www.mamicode.com/‘DTF_‘>午餐费   " +124                 " <option value=http://www.mamicode.com/‘QTY_‘>其他  " +125                 " <option value=http://www.mamicode.com/‘YBJ_‘>医保金    " +126                 "<option value=http://www.mamicode.com/‘QT_‘>其他  ";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 =http://www.mamicode.com/= NowSal && (textinput[i].id.indexOf(select) > -1)181                     {182                         textinput[i].value =http://www.mamicode.com/ 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 }

 

HTML锁定Table中某一列