```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函数创建表格
```
网友评论