點擊編輯按鈕，前端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);

}

});

}

OM節點獲取

var oLi = document.getElementsByTagName("li");
var oLi = document.getElementById("cssLi");
var oLi = document.getElementsByName("myInput");

操作屬性：

document.getElementById(id).attribute=new value

實例

本例改變了 <img> 元素的 src 屬性：

<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>

操作內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性和innerText（IE支持） outerText outerHTML

區別描述如下：

innerHTML 設置或獲取位于對象起始和結束標簽內的 HTML

outerHTML 設置或獲取對象及其內容的 HTML 形式

innerText 設置或獲取位于對象起始和結束標簽內的文本

outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本

document.getElementById(id).innerHTML=new HTML

實例一

本例改變了 <p> 元素的內容：

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>

實例二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML、innerText、outerHTML之間的區別</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　id1.innerHTML="<i><u>設置或獲取位于對象起始和結束標簽內的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>設置或獲取位于對象起始和結束標簽內的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>設置或獲取對象及其內容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>設置(包括標簽)或獲取(不包括標簽)對象的文本.</u></i>";
　　}
　　</script>
　　</head>
　　<body>
　　<ul>
　　<li id="id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
　　<li id="id2" onclick="innerTextDemo()">innerText效果.</li>
　　<li id="id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
　　<li id="id4" onclick="outerTextDemo()">outerText效果.</li>
　　</ul>
　　</body>
　　</html>

簡單的說innerHTML和outerHTML、innerText與outerText的不同之處在于：

　　1)、innerHTML與outerHTML在設置對象的內容時包含的HTML會被解析，而innerText與outerText則不會。

　　2)、在設置時，innerHTML與innerText僅設置標簽內的文本，而outerHTML與outerText設置包括標簽在內外的文本(多個標簽)。

特別說明：

　　innerHTML是符合W3C標準的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，

　　如果要輸出不含HTML標簽的內容，可以使用innerHTML取得包含HTML標簽的內容后，再用正則表達式去除HTML標簽，

　　下面是一個簡單的符合W3C標準的示例：

<a href="javascript：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>

操作樣式

如需改變 HTML 元素的樣式，請使用這個語法：

document.getElementById(id).style.property=new style

CSS樣式的個別屬性采用馱峰式寫法(如：backgroundColor), 且不帶橫線。

document.body.style.backgroundColor="red";

如：

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
document.getElementById(id).className="類名"；
document.getElementById(id).className="類名1 類名2"；
document.getElementById(id).className+=" 類名3"；//注意要留有空格

<!DOCTYPE HTML>
<html>
<head>
<title>追加CSS類別</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy = document.getElementsByTagName("ul")[0];
oMy.className += " myUL2"; //追加CSS類,注意要留有空格
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>

注意：追加CSS類,注意要留有空格;

ul標記已經設定了.myUL1類的樣式的情況下,oMy.className = "myUL1 myUL2"不等同于oMy.className += " myUL2",

oMy.className = "myUL1 myUL2"表現形式與oMy.className = "myUL2"一樣; 因此應當采用oMy.className += " myUl2";

改變 HTML 樣式

通過 HTML DOM，您能夠訪問 HTML 元素的樣式對象。

下面的例子改變一個段落的 HTML 樣式：

如需向 HTML DOM 添加新元素，您首先必須創建該元素（元素節點），然后把它追加到已有的元素上。

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>

注意:經過測試證明,para.appendChild(node);調換至最后一行,運行正常

最可行的方法:添加節點的順序,由內到外(個人習慣);

1），模板modify_jsp.ftl文件

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
String childPath = request.getContextPath();
String basePath = request.getScheme()+"://"
	+request.getServerName()+":"+request.getServerPort()+ childPath +"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
	<%@ include file="/pub/scripts.jsp"%>

    <script type="text/javascript">

		function submit_save() {

			var varName_ = $("#name_").val();
			if(varName_ == null || varName_ == '') {
			    alert("請先輸入名稱！")
			    return false;
			} else {
                $("#modifyForm").submit();
			}
        }
			

		// 循環字段集，名稱字符與元素id獲取元素
		<#list mapDataList as listItm >
			美元符("井號${listItm.columnName}").val() 雙斜桿 ${listItm.columnComment}
		</#list>
				
    </script>
    
  </head>
  <body>
  		
		<!-- 標題區域 -->
		<div class="tleBg">
			<div class="title">
				<span class="txt"> <em></em><#list mapDataTableComment as listItmCom > ${listItmCom.columnComment} </#list>- 修改
				</span> <a href="javascript：;" class="search-hide"></a>
			</div>
			<div class="clr"></div>
		</div>
  		
  		<!-- 查詢維度區域 -->
		<div class="t_list" id="addtable">
			<form name="modifyForm" id="modifyForm" action="<%=childPath %>/<#list mapDataTableComment as listItmCom > ${listItmCom.columnName} </#list>Conter/<#list mapDataTableComment as listItmCom > ${listItmCom.columnName} </#list>ModifySave" method="post">
				<input type="hidden" name="tid" value="美元符左大括<#list mapDataTableComment as listItmCom > ${listItmCom.columnName} </#list>Dto.tid右大括" />

				<table border="0" cellspacing="0" width="100%" cellpadding="0" class="t_list_1">
					<tbody>

					
					<#list mapDataList as listItm >
						<tr style="line-height: 36px;">
							<td width="15%">
								 
							</td>
							<td width="20%" class="text" style="text-align: right;">
								${listItm.columnComment}：
							</td>
							<td>
								<input type="text" id="${listItm.columnName}" name="${listItm.columnName}" style="width: 300px;" class="inputStyle" value="美元符左大括${listItm.columnName}Dto.name_右大括" />
							</td>
							<td width="15%">
								 
							</td>
						</tr>
					</#list>
					
						
						<tr>
							<td width="15%">
								 
							</td>
							<td width="20%" class="text" style="text-align: right;">
								 
							</td>
							<td>
								<input type="button" id="btn_add" value="保 存" class="t_button_gray" onclick="return submit_save();" />
								<input type="reset" id="btn_rest" value="重 置" class="t_button_gray" />
							</td>
							<td width="15%">
								 
							</td>
						</tr>

					</tbody>
				</table>
			</form>
		</div>
  		
  </body>
</html>

（2），生成修改jsp文件

public class TestCls {

    public static void main(String[] args) throws Exception {
        TestCls testCls = new TestCls();
        String testT00_po = "testT00_user";
        String generFileName = testT00_po + "Modify.jsp";
        testCls.outTemplate(testT00_po, "用戶數據"
                , generFileName, "modify_jsp.ftl" );

        System.out.println("執行成功！");
    }

    // 輸出到模板
    private void outTemplate(String entryInfoPoName, String tableComment
            , String templateFileName , String templFileName ) throws Exception {

        Configuration configuration = new Configuration();
        String templateDir = "F:\\xbl\\myResource\\temp_test_";
        configuration.setDirectoryForTemplateLoading(new File(templateDir));
        Template template = configuration.getTemplate(templFileName);

        Map<String, List<EntryInfoPo>> dataMap = new HashMap<String, List<EntryInfoPo>>();
        List<EntryInfoPo> listEntryInfo = new ArrayList<EntryInfoPo>();
        listEntryInfo = testMetaAddComment();
        dataMap.put("mapDataList", listEntryInfo );

        // 表注釋
        dataMap.put("mapDataTableComment", testTableComment(entryInfoPoName, tableComment ));
        String generFileDir = "F:\\xbl\\myResource\\temp_test_\\gener_file_\\";
        File generFile = new File(generFileDir + templateFileName);
        if(generFile.exists()) {
            generFile.delete();
        }
        generFile.createNewFile();

        Writer outputWriter = new OutputStreamWriter(new FileOutputStream(generFile ) );
//        Writer outputWriter = new OutputStreamWriter(System.out );

        template.process(dataMap, outputWriter);
        System.out.println("輸出完成！");
        outputWriter.close();
    }

    // 表注釋
    private List<EntryInfoPo> testTableComment(String entryInfoPoName, String tableComment) throws Exception {

        List<EntryInfoPo> listTableComment = new ArrayList<EntryInfoPo>();
        EntryInfoPo entryInfoPo = new EntryInfoPo();
        entryInfoPo.setColumnName(entryInfoPoName);
        entryInfoPo.setColumnComment(tableComment);
        entryInfoPo.setUpperColumnName(firTextUpper( entryInfoPoName ) );
        listTableComment.add(entryInfoPo);
        return listTableComment;
    }

    // 首字母大寫
    private String firTextUpper(String scontext ) {
        int textLength = scontext.length();
        String sufText = scontext.substring(1, textLength);
        String firText = scontext.substring(0, 1);
        firText = firText.toUpperCase();
        String finText = firText + sufText;
        return finText;
    }

    private List<EntryInfoPo> testMetaAddComment() throws Exception {

        List<EntryInfoPo> listEntryInfoPo = new ArrayList<EntryInfoPo>();
        Connection connection = getDataBaseConnection();
        Statement statement = connection.createStatement();
        ResultSet resultSet = statement.executeQuery("show full columns from t00_user ");
        while (resultSet.next()) {

            String columnComment = resultSet.getString("Comment");
            String columnName = resultSet.getString("Field");
            columnName = columnName.toLowerCase();
            EntryInfoPo entryInfoPo = new EntryInfoPo();
            entryInfoPo.setColumnName(columnName);
            entryInfoPo.setColumnComment(columnComment);
            listEntryInfoPo.add(entryInfoPo);
        }
        return listEntryInfoPo;
    }
    private Connection getDataBaseConnection() throws Exception {
        // 連接數據庫
        Class.forName("com.mysql.jdbc.Driver");
        String databaseUrl = "jdbc:mysql://127.0.0.1:3306/grcdb05?useUnicode=true&characterEncoding=utf8";
        Connection connection = DriverManager.getConnection(databaseUrl, "root", "root");
        return connection;
    }
}

（3），注意替換空格及替換文字

在線咨詢

上一篇：6個最好的HTML框架，用于開發一個偉大的移動UI
下一篇：html基礎必備-列表標記，前端小白一看就會

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

點擊編輯按鈕，前端table表格行內指定td可修改（table動態生成）

您的項目需求