JS & JQuery表格操作,修改内容,待改进提交

2018-08-21  本文已影响0人  wangjunmech

```swift

jQuery双击修改表格内容

/*控制表格*/

table{

width: 100%;

table-layout: fixed;

border: 1px solid #abcdef;

border-collapse: collapse;

table-layout: fixed;

word-break: break-all;

word-wrap: break-word;

}

/*.award-name{-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%;}    */

th,tr,td{

height: 30px;

border: 1px solid #abcdef;

text-align: center;

}

td{text-overflow: ellipsis; }

.oddRow1{background: #09f}

.evenRow1{background: #38a38a}

.currRow1{background: yellow}

/*控制tabs*/

#tabname li{

list-style-type: none;

border: 2px solid #abcdef;

border-bottom: none;

width: 200px;

display:inline;

/* li 不换行,宽度根据内容自适应,通过 float 实现 */

margin: 0px;

padding: 0px;

float:left;

background-color: #ccd;

margin: 0px 20px 10px 0px;

line-height: 50px;

text-align: center;

}

#content div{

border: 2px solid #abcdef;

width: 600px;

/*display:inline;*/

/* li 不换行,宽度根据内容自适应,通过 float 实现 */

margin: 0px;

padding: 0px;

/*float:left;*/

background-color: #d323eb;

/*margin: 0px 20px 10px 0px;*/

/*line-height: 50px;*/

text-align: center;

}

input{

background: lightyellow;

}

.hover{

background: lightgrey;

}

jQuery双击修改单元格内容测试,遍历表格中的一列数据

表达示组合:alert((2<4)==(5>3)==(3<=3)==(2>=2)==(2==2)==true);


echo site_url('admin/javascriptex/js21');

var_dump($_POST);

?>

ABCDEF

A1B1测试多行文本
B1测试多行文本
B1测试多行文本
B1测试多行文本
B1测试多行文本
B1测试多行文本
C1D1E1F1

A2B2C2D2E2F2

A3B3C3D3E3F3

A4B4C4D4E4F4

遍历一列表格的值

说明:

//****************start 双击修改单元格内容*****************//

$(function(){

$('table td').dblclick(function(){

var t=$(this).text();//获取单元文本内容

var ww= $(this).width();//获取单元格宽

var hh= $(this).height(); //获取单元格高

$(this).width(ww);//设置单元格宽,不然双击弹出输入框后宽度会变化

if(!$(this).is('.input')){

$(this).addClass('input').html('').find('input').focus().blur(function(){

var thisid = $(this).parent().siblings("th:eq(0)").text();

var thisvalue=$(this).val();   //输入后的input文本框内容

var thisclass = $(this).parent().attr("class");

console.log('输出1:'+thisid);

console.log('输出2:'+thisvalue);

console.log('输出3:'+thisclass);

$.ajax({

type: 'POST',

url: 'update.php',

data: "thisid="+thisid+"&thisclass="+thisclass+"&thisvalue="+thisvalue

});

//如果修改后的值与修改前的内容相等则不加样式,否则加上黄色背景

if(thisvalue == t){

// $(this).parent().removeClass('input');

$(this).parent().removeClass('input').html($(this).val() || 0);

}else{

$(this).parent().removeClass('input').html($(this).val() || 0).css('background-color','lightblue');

$("#submit").css('display','block');//如果内容有修改才显示提交按钮

}

});

}

}).hover(

function(){

$(this).addClass('hover');

},

function(){

$(this).removeClass('hover');

}

);

});

$('#submit2').click(function() {

// alert('提交处理!');

// alert($('table td').length);//获取表格单元格总数

alert('表格行数为:'+$('table tr').length+"    表格单元格总数为:"+$('table td').length);//获取表格总行数

});

//****************end 双击修改单元格内容*****************//

// $('table td').click(function(){

// alert($(this).text());

//  })

//***********查找指定列的内容

$('input[name=look]').dblclick(function(event) {

alert("uu");

});

// $('#lk').click(function(event) {

//   //alert($('input[name=look]').val());

//   var rownum=$('input[name=look]').val();//获取输入的值

//        rownum=(Math.abs(rownum));//求绝对值

//           var tlines=$("#table").find("tr").length; //行数

//         var trows=$("#table").find("tr").find("td").length/tlines; //列数

//         var rowindex=rownum-1;

//         //alert(isNaN(rownum));

//         if(isNaN(rownum)){

//             alert('请输入有效数字!');

//             return false;

//         };

//         if(rownum==''||rownum==0){

//             alert('请输入要遍历的列序号,从1开始!');

//             return false;

//         }

//             if(rownum > trows-1){

//             alert('没有这么多列哦!!!');

//             return false;

//         }else{

//     //***********遍历表格中的一列*****************//

//           $("#table").find("tr").each(function (){

//   //第二列单元格的值eq(索引)

//   alert($(this).children('td:eq('+rowindex+')').text());

//         });

//     //***********end 遍历表格中的一列*****************//

// };

// });

// //遍历一列表格的值

// 满足条件并改变行背景景色

// $("#table tr:eq(0)").css('background','gray')

$("#table tr:eq(3)").css('background','gray')

//

//alert((2<4)==(5>3)==(3<=3)==(2>=2)==(2==2)==true); //表达示组合

//*************JS表格输出函数************//

function jstable(rows,cols,divName) {

// var rows = document.getElementById('rows').value;

// var cols = document.getElementById('cols').value;

var rows = rows;

var cols = cols;

var divName = divName;

var table = "";

for(var i = 1;i<=rows;i++){

table +="";

for(var j = 1; j<=cols;j++){

table += ""+i+"行"+j+"列"+"";

}

}

table +="";

// document.write(table);

divName = document.getElementById(divName);

divName.innerHTML = table;

}

//***********

js函数输出表格示例

请输入行数:

请输入列数:

js函数创建表格

```

上一篇下一篇

猜你喜欢

热点阅读