你的位置:首页 > Java教程

[Java教程]Jquery更改table中的内容(一)


css部分:

.tab{
  border:solid 1px #00aaee;
  text-align: left;
  margin:20px;
}
.tab tr{
  border-top: solid 1px #00aaee;
}
.tab tr td,.tab tr th{
  border-right: solid 1px #00aaee;
  height:35px;
  width: 200px;
  padding: 0 5px;
}
.tab tr th{
  background: #00aaee;
  color:#fff;
}
.tab input{
  width: 90%;
  margin: 0;
  padding: 3px ;
  border: solid 1px #00aaee;
}

html部分:

 

<table class="tab">
<tr>
<th>编号</th><th>名称</th>
</tr>
<tr>
<td>1</td><td>辣条</td>
</tr>
<tr>
<td>2</td><td>牛奶</td>
</tr>
<tr>
<td>3</td><td>苹果</td>
</tr>
<tr>
<td>4</td><td>葡萄</td>
</tr>
</table>


js部分:

$('.tab td').bind('click',(function(){
if($('input').length > 0){
$('input').parent().html($('input').val());
}
var current = $(this);
if(current.children('input').length > 0){
return false;
}
var txt = current.html();
current.html('');
var inputObj = $("<input type='text'>").val(txt).appendTo(current);
inputObj.click(function(){
return false
})
}));