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

```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函数创建表格

```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351