点击编辑按钮，前端table表格行内指定td可修改（

点击编辑按钮，前端table表格行内指定td可修改（table动态生成）

.先上最后效果图：

2.代码跟上，重点在 2）：

1）

//服务列表页面动态加载服务

function ready() {

var url=base_path+"console/cfg/getBaseLayers/"+configId;

$.ajax({

url:url,

type:"get",

dataType:"json",

success:function (result) {

//生成之前先清空tr,防止AJAX异步加载重复生成

$("#lot tr").remove();

var length=result.length;

for (var i=0;i<length;i++){

var name=result[i].name; //服务名称

var alias=result[i].alias;//服务别名

var type=result[i].type;//服务类型

var year=result[i].year;//年份

var url=result[i].url;//服务地址

var visible=result[i].visible;//是否可见

var id=result[i].id;//id

serviceIdArray[i]=id;//此处将id塞给serviceIdArray，用于判断是否添加。

var str="";

if (visible==true){

//生成tr

str +='<tr id="';

str +=id;

str +='"';

str +=' class="lot_box"> <td>';

str +=i+1;

str +='</td> <td>';

str +=name;

str +='</td> <td>';

str +=alias;

str +='</td> <td>';

str +=type;

str +='</td> <td>';

str +=year;

str +='</td> <td>';

str +=url;

str +='</td> <td>';

str +='<input id="';

str +=id;

str +='"';

str +='type="checkbox" checked="true" onchange="modifyService(this.id);"/>';

str +='</td> <td> <input id="';

str +=id;

str +='"';

str +='type="button" value="编辑" onclick="editTd(this.id)"/>';

str +='</td> <td>';

str +='<button class="rosy" id="';

str +=id;

str +='"';

str +=' onclick="deleteService(this.id);">';

str +='<img src="static/img/del14.png"></button>';

str +='</td> </tr>';

}else {

//生成tr

str +='<tr id="';

str +=id;

str +='"';

str +=' class="lot_box"> <td>';

str +=i+1;

str +='</td> <td>';

str +=name;

str +='</td> <td>';

str +=alias;

str +='</td> <td>';

str +=type;

str +='</td> <td>';

str +=year;

str +='</td> <td>';

str +=url;

str +='</td> <td>';

str +='<input id="';

str +=id;

str +='"';

str +='type="checkbox" onchange="modifyService(this.id);"/>';

str +='</td> <td> <input id="';

str +=id;

str +='"';

str +='type="button" value="编辑" onclick="editTd(this.id)"/>';

str +='</td> <td>';

str +='<button class="rosy" id="';

str +=id;

str +='"';

str +=' onclick="deleteService(this.id);">';

str +='<img src="static/img/del14.png"></button>';

str +='</td> </tr>';

}

var $tr=$(str);

$("#lot").append($tr);

}

});

}

挑战30天在头条写日记#

HTML是一种用于创建网页结构和内容的标记语言，其中包含了许多标签，可以用于排版、布局和展示内容。本文将详细介绍HTML中的<tr>和<td>标签的使用方法，并通过示例展示如何创建表格。

1. <tr>标签的作用： <tr>标签代表HTML表格中的一行（行数据），它可以包含一个或多个<td>元素作为单元格。

2. <td>标签的作用： <td>标签用于定义表格中的一个单元格（列数据），可以包含文本、图像、链接等内容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>标签时，首先需要创建一个<table>元素作为表格的容器，然后在其中嵌套<tr>和<td>标签，如下所示：

htmlCopy code<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

4. 表格样式： 可以使用CSS来为表格添加样式，如设置边框、背景颜色等。以下是一个简单的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例应用： 以下示例演示了如何使用<tr>和<td>标签创建一个包含姓名、年龄和城市的简单表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>广州</td>
  </tr>
</table>

</body>
</html>

6. 书籍参考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 总结： 通过本文的介绍，我们了解了HTML中<tr>和<td>标签的基本用法，以及如何创建简单的表格和添加样式。使用这些标签，我们可以轻松地创建具有结构和内容的网页表格，提升页面的可读性和可视性。

例

一个简单的 HTML 表格，带有两个单元格：

<tr>

</tr>

</table>

浏览器支持

所有主流浏览器都支持 <td> 标签。

标签定义及使用说明

<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两种单元格类型：

表头单元格 - 包含头部信息（由 <th> 元素创建）
标准单元格 - 包含数据（由 <td> 元素创建）

<th> 元素中的文本通常呈现为粗体并且居中。

<td> 元素中的文本通常是普通的左对齐文本。

提示和注释

提示：如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性！

HTML 4.01 与 HTML5之间的差异

HTML 5 中不再支持 HTML 4.01 中的某些属性。

属性

属性	值	描述
abbr	text	HTML5 不支持。规定单元格中内容的缩写版本。
align	leftrightcenterjustifychar	HTML5 不支持。规定单元格内容的水平对齐方式。
axis	category_name	HTML5 不支持。对单元格进行分类。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	HTML5 不支持。HTML 4.01 已废弃。规定单元格的背景颜色。
char	character	HTML5 不支持。规定根据哪个字符来进行内容的对齐。
charoff	number	HTML5 不支持。规定对齐字符的偏移量。
colspan	number	规定单元格可横跨的列数。
headers	header_id	规定与单元格相关联的一个或多个表头单元格。
height	pixels%	HTML5 不支持。HTML 4.01 已废弃。设置单元格的高度。
nowrap	nowrap	HTML5 不支持。HTML 4.01 已废弃。规定单元格中的内容是否折行。
rowspan	number	设置单元格可横跨的行数。
scope	colcolgrouprowrowgroup	HTML5 不支持。定义将表头单元格与数据单元格相关联的方法。
valign	topmiddlebottombaseline	HTML5 不支持。规定单元格内容的垂直排列方式。
width	pixels%	HTML5 不支持。HTML 4.01 已废弃。规定单元格的宽度。

全局属性

<td> 标签支持 HTML 的全局属性。

事件属性

<td> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：GitHub页面：搭建科研人员个人网站
下一篇：京东年货节“全民炸年兽”火力全开，带来满满福气，更有

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

点击编辑按钮，前端table表格行内指定td可修改（

您的项目需求