點擊編輯按鈕，前端table表格行內(nèi)指定td可修改（

點擊編輯按鈕，前端table表格行內(nèi)指定td可修改（table動態(tài)生成）

.先上最后效果圖：

2.代碼跟上，重點在 2）：

1）

//服務(wù)列表頁面動態(tài)加載服務(wù)

function ready() {

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

$.ajax({

url:url,

type:"get",

dataType:"json",

success:function (result) {

//生成之前先清空tr,防止AJAX異步加載重復(fù)生成

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

var length=result.length;

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

var name=result[i].name; //服務(wù)名稱

var alias=result[i].alias;//服務(wù)別名

var type=result[i].type;//服務(wù)類型

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

var url=result[i].url;//服務(wù)地址

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);

}

});

}

挑戰(zhàn)30天在頭條寫日記#

HTML是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言，其中包含了許多標(biāo)簽，可以用于排版、布局和展示內(nèi)容。本文將詳細(xì)介紹HTML中的<tr>和<td>標(biāo)簽的使用方法，并通過示例展示如何創(chuàng)建表格。

1. <tr>標(biāo)簽的作用： <tr>標(biāo)簽代表HTML表格中的一行（行數(shù)據(jù)），它可以包含一個或多個<td>元素作為單元格。

2. <td>標(biāo)簽的作用： <td>標(biāo)簽用于定義表格中的一個單元格（列數(shù)據(jù)），可以包含文本、圖像、鏈接等內(nèi)容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>標(biāo)簽時，首先需要創(chuàng)建一個<table>元素作為表格的容器，然后在其中嵌套<tr>和<td>標(biāo)簽，如下所示：

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

4. 表格樣式： 可以使用CSS來為表格添加樣式，如設(shè)置邊框、背景顏色等。以下是一個簡單的示例：

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

5. 示例應(yīng)用： 以下示例演示了如何使用<tr>和<td>標(biāo)簽創(chuàng)建一個包含姓名、年齡和城市的簡單表格：

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. 總結(jié)： 通過本文的介紹，我們了解了HTML中<tr>和<td>標(biāo)簽的基本用法，以及如何創(chuàng)建簡單的表格和添加樣式。使用這些標(biāo)簽，我們可以輕松地創(chuàng)建具有結(jié)構(gòu)和內(nèi)容的網(wǎng)頁表格，提升頁面的可讀性和可視性。

例

一個簡單的 HTML 表格，帶有兩個單元格：

<tr>

</tr>

</table>

瀏覽器支持

所有主流瀏覽器都支持 <td> 標(biāo)簽。

標(biāo)簽定義及使用說明

<td> 標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格。

HTML 表格有兩種單元格類型：

表頭單元格 - 包含頭部信息（由 <th> 元素創(chuàng)建）
標(biāo)準(zhǔn)單元格 - 包含數(shù)據(jù)（由 <td> 元素創(chuàng)建）

<th> 元素中的文本通常呈現(xiàn)為粗體并且居中。

<td> 元素中的文本通常是普通的左對齊文本。

提示和注釋

提示：如果需要將內(nèi)容橫跨多個行或列，請使用 colspan 和 rowspan 屬性！

HTML 4.01 與 HTML5之間的差異

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

屬性

屬性	值	描述
abbr	text	HTML5 不支持。規(guī)定單元格中內(nèi)容的縮寫版本。
align	leftrightcenterjustifychar	HTML5 不支持。規(guī)定單元格內(nèi)容的水平對齊方式。
axis	category_name	HTML5 不支持。對單元格進(jìn)行分類。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定單元格的背景顏色。
char	character	HTML5 不支持。規(guī)定根據(jù)哪個字符來進(jìn)行內(nèi)容的對齊。
charoff	number	HTML5 不支持。規(guī)定對齊字符的偏移量。
colspan	number	規(guī)定單元格可橫跨的列數(shù)。
headers	header_id	規(guī)定與單元格相關(guān)聯(lián)的一個或多個表頭單元格。
height	pixels%	HTML5 不支持。HTML 4.01 已廢棄。設(shè)置單元格的高度。
nowrap	nowrap	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定單元格中的內(nèi)容是否折行。
rowspan	number	設(shè)置單元格可橫跨的行數(shù)。
scope	colcolgrouprowrowgroup	HTML5 不支持。定義將表頭單元格與數(shù)據(jù)單元格相關(guān)聯(lián)的方法。
valign	topmiddlebottombaseline	HTML5 不支持。規(guī)定單元格內(nèi)容的垂直排列方式。
width	pixels%	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定單元格的寬度。

全局屬性

<td> 標(biāo)簽支持 HTML 的全局屬性。

事件屬性

<td> 標(biāo)簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：GitHub頁面：搭建科研人員個人網(wǎng)站
下一篇：京東年貨節(jié)“全民炸年獸”火力全開，帶來滿滿福氣，更有

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

點擊編輯按鈕，前端table表格行內(nèi)指定td可修改（

您的項目需求