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    })}));
时间: 2024-10-04 17:39:06

Jquery更改table中的内容(一)的相关文章

关于Jquery获取Table中td内的内容

$(this).children().eq(1).text()获取的是显示的值$(this).children().eq(1).html()获取的是<td></td>之间的所有内容$('.trSelected',grid).find("td").eq(7).text();获取的是选中的某行的内容 遍历表<table id="gird"..... $("#grid tr").each(function() {     

jQuery遍历table中的tr td并获取td中的值

jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(function(){ <span style="white-space:pre"> </span> var year = $("#year").val(); var month = $("#month").val(); var da

jquery遍历table tr td内容

$("#result").find("tr").each(function () { $(this).find("td").each(function () { if ($(this).text().indexOf("惠") > 0) { var m = $(this).text().toString(); $(this).css("width", "165px"); $(this

当Table中td内容为空时,显示边框的办法

原文:当Table中td内容为空时,显示边框的办法 1111111111111 目录 定义和用法 实例 浏览器支持 可能的值 定义和用法 说明 实例 浏览器支持 可能的值 相关页面 1. 在 table的css里面加: border-collapse:collapse; 在 td 的css里面加:      empty-cells:show; 2 .最简单的就是 在TD里写个  说明: border-collapse设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开. 定义

Jquery之table中根据行选中,进行背景变色和radio选中

实现功能:点击列表中的某一行,然后当前行会变成其他颜色,并且其中的radio会被选中. <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() 

table中td内容过长 省略号显示

首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1">用户ID</th> <th class="col-md-1">用户名</th> <th class="col-md-1">联系电话</th> <th class="col-md-1&q

jQuery实现table中两列CheckBox只能选中一个

//html <table id="unit"> <tr> <th>选项一</th> <th>选项二</th> <th>姓名</th> </tr> <tr> <td><input type="checkbox" /></td> <td><input type="checkbox&quo

jquery循环table中tbody的tr中input:text,将值进行拼接传入控制器并返回状态和描述

引用jquery $(function(){ $("#按钮id").click(function(){ var nums="";//变量 $("#table的id tbody tr").each(function(){ var num1=$(this).find("input:text:eq(0)").val(); var num2=$(this).find("input:text:eq(1)").val(

jQuery给table中的负数标红色

<table class="tb_list"></table> 1 $(function(){ 2 $(".tb_list td").each(function(i,n){ 3 var text = $.trim($(n).text()); 4 var fVal = parseFloat(text); 5 if(!isNaN(fVal) && fVal < 0){ 6 $(n).css("color"