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 = resultlength; 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(thisid);"/>'; str += '</td> <td> <input id="'; str += id; str += '"'; str += 'type="button" value="编辑" onclick="editTd(thisid)"/>'; str += '</td> <td>'; str += '<button class="rosy" id="'; str += id; str += '"'; str += ' onclick="deleteService(thisid);">'; str += '<img src="static/img/del14png"></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(thisid);"/>'; str += '</td> <td> <input id="'; str += id; str += '"'; str += 'type="button" value="编辑" onclick="editTd(thisid)"/>'; str += '</td> <td>'; str += '<button class="rosy" id="'; str += id; str += '"'; str += ' onclick="deleteService(thisid);">'; str += '<img src="static/img/del14png"></button>'; str += '</td> </tr>';
} var $tr = $(str); $("#lot")append($tr);
}
}
});
}
2）
//修改table行内元素(td)function editTd(id) { //选中编辑按钮的时候,把这行指定的几个td变成文本框 var b = $("input[type='button'][id='"+id+"']")parent(); //td var a = bsiblings(); //td的兄弟节点 if(a[1]childrenlength===0){ a[1]innerHTML="<input type='text' value='"+a[1]innerText+"'/>";
}
if(a[2]childrenlength===0){ a[2]innerHTML="<input type='text' value='"+a[2]innerText+"'/>";
}
if(a[3]childrenlength===0){ a[3]innerHTML="<input type='text' value='"+a[3]innerText+"'/>";
} //将编辑改成 保存和取消两个按钮 b[0]innerHTML="<input id='"+id+"' type='button' onclick='saveEditTd(thisid);' value='保存'/><input type='button' onclick='resertEditTd();' value='取消'/>";
//以下注掉的都是在网上找的参考。 /alert(a[0]getText()); var $this = $(this)index(); alert($this);/ /$('input[type="button"]')on('click', function(){ var $this = $(this)parent()parent();//tr ready(); });/ /var $ = function(node) { return typeof node == "string" documentgetElementById(node) : node; } var $1 = function(node, parent){ var nd = documentcreateElement(node); if(parent) parentappendChild(nd); return nd; } /! 绑定事件流 !/ var bind = function(obj, eventName, funcionName){ if(objaddEventListener){ objaddEventListener(eventName, funcionName,false); }else if(objattachEvent) { objattachEvent("on" + eventName, funcionName); }else{ obj["on" + eventName] = funcionName; } }; var fulltable = function(tbody, data){ var pd = datadata; var column = datacolumn; for(var i=0, len=datarows; i<len; i++){ var tr = $1("tr", tbody); var cd = pd[i]; for(var j=0,jlen=columnlength; j<jlen; j++){ var td = $1("td", tr); tdinnerHTML = cd[column[j]];//innerText不兼容火狐，可以自己写innerText和textContent的兼容，这里就直接用innerHTML了 } } } var littlehow_edit_table = function(tbody, ev){ thistbody = $(tbody); thisevent = ev ev : "click";//默认为单机事件 thisinit = function(data) {//data可以是undefined if(data) { fulltable(thistbody, data); } //调用可编辑 thisedit(); } thisedit = function(){ var tds = thistbodygetElementsByTagName("td"); for(var i=0,len=tdslength; i<len; i++){ bind(tds[i], thisevent, thisclick); } } thisclick = function(){ //alert(thischildrenlength); if(thischildrenlength > 0) return; var v = thisinnerHTML; thisinnerHTML = ""; var input = $1("input", this); inputtype = "text"; inputvalue = v; inputfocus();//光标聚集 bind(input, "blur", blur); } var blur = function(){ var v = thisvalue; thisparentNodeinnerHTML = v; } } window$$ = function(id, ev){ return new littlehow_edit_table(id, ev); };/ /$('editable')handleTable({ "handleFirst" : true, "cancel" : " <span class='glyphicon glyphicon-remove'></span> ", "edit" : " <span class='glyphicon glyphicon-edit'></span> ", "add" : " <span class='glyphicon glyphicon-plus'></span> ", "save" : " <span class='glyphicon glyphicon-saved'></span> ", "confirm" : " <span class='glyphicon glyphicon-ok'></span> ", "operatePos" : -1, "editableCols" : [2,3,4], "order": ["add","edit"], "saveCallback" : function(data, isSuccess) { //这里可以写ajax内容，用于保存编辑后的内容 //data: 返回的数据 //isSucess: 方法，用于保存数据成功后，将可编辑状态变为不可编辑状态 var flag = true; //ajax请求成功（保存数据成功），才回调isSuccess函数（修改保存状态为编辑状态） if(flag) { isSuccess(); alert(data + " 保存成功"); } else { alert(data + " 保存失败"); } return true; }, "addCallback" : function(data,isSuccess) { var flag = true; if(flag) { isSuccess(); alert(data + " 增加成功"); } else { alert(data + " 增加失败"); } }, "delCallback" : function(isSuccess) { var flag = true; if(flag) { isSuccess(); alert("删除成功"); } else { alert("删除失败"); } } });/ ///dom创建文本框 var input = documentcreateElement("input"); inputtype="text" ; //得到当前的单元格 var currentCell ; function editCell(event) { if(event==null) { currentCell=windoweventsrcElement; } else { currentCell=eventtarget; } //根据Dimmacro 的建议修定下面的bug 非常感谢 if(currentCelltagName=="TD"){ //用单元格的值来填充文本框的值 inputvalue=currentCellinnerHTML; //当文本框丢失焦点时调用last inputonblur=last; inputondblclick=last; currentCellinnerHTML=""; //把文本框加到当前单元格上 currentCellappendChild(input); //根据liu_binq63 的建议修定下面的bug 非常感谢 inputfocus(); } } function last() { //充文本框的值给当前单元格 currentCellinnerHTML = inputvalue; } //最后为表格绑定处理方法 documentgetElementById("table")ondblclick=editCell;/ /var ttr = $(this)val()=="编辑""确定":"编辑"; $(this)val(ttr); // 按钮被点击后，在“编辑”和“确定”之间切换 $(this)parent()siblings("td")each(function() { // 获取当前行的其他单元格 var obj_text = $(this)find("input:text"); // 判断单元格下是否有文本框 if(!obj_textlength) // 如果没有文本框，则添加文本框使之可以编辑 $(this)html("<input type='text' value='"+$(this)text()+"'>"); else // 如果已经存在文本框，则将其显示为文本框修改的值 $(this)html(obj_textval()); });/ /$('input[type="button"]')on('click', function(){ var $this = $(this); var $td_arr = $thisparent()html('保存')prevAll('td'); $each($td_arr, function(){ var $td = $(this); $tdhtml('<input type="text" value="'+$tdhtml()+'">'); }); });/}
3）
//取消editTd编辑function resertEditTd() { ready(); //此方法是自己写的，局部刷新页面，重新加载数据
}
//保存editTd编辑function saveEditTd(id) { var a = $("input[type='button'][id='"+id+"']")parent()siblings(); //td的兄弟节点 var td_name = a[1]children[0]value; //服务名称 var td_alias = a[2]children[0]value; //服务别名 var td_type = a[3]children[0]value; //服务类型 var url = base_path+"console/cfg/saveEditTd"; $ajax({ url:url, type:"post", data:{ "td_name":td_name, "td_alias":td_alias, "td_type":td_type, "id":id, "tpl":configId }, datatype:"json", success:function (result) { ready(); //此方法是自己写的，局部刷新页面，重新加载数据
}
});
}
1、构思：一张大、一张小要形成什么意境，要事先构思好。
2、获取地址：如果自己上传，完成后点显示源代码，复制地址备用。如果是网上现有，右击点“属性”，复制地址备用。注意记住的宽和高。
3、进入编辑：进入自己的网站或博客后台，并使编辑器处于代码编辑状态。贴入代码：
<TABLE width=650 background=大图地址 height=488>
<TBODY>
<TR>
<TD>
<P><IMG style="MARGIN: 0px 0px 300px 300px" src="小图地址">
</P></TR></TBODY></TABLE>
4、修改代码：将第二步中获取的地址分别添加到本文第三步相应位置，并修改宽（width）和高（height）。
5、调整小位置：这是制作的关键代码：MARGIN: 0px 0px 300px 300px调整上边的值，就可实现定位。
6、修饰：还可对整体进行修饰。例如加边框，会有立体感。加入代码“border=10”即可（10可以调整）。
一、动态加载表格
1首先在html中为表格的添加位置设置id
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下
<div id="tdl"><div>
2在javascript中写添加表格的语句
若在当前html文件中，则写在<script>标签内部，如
代码如下:
<script type="text/javascript" >
documentgetElementById("tbl")innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建
</script>
若是通过引入js文件，则在js文件（假设是testjs）中直接写如下语句
代码如下:
documentgetElementById("tbl")innerHTML="<table><tr><td></td></tr></table>"
然后再引入自己的html文件
代码如下:
<script type="text/javascript" src="testjs"></script>
二、 动态添加表格行
1首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下
代码如下:
<table>
<thead></thead>
<tfoot><tfoot> //tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。
<tbody id="rows"></tbody>
</table>
[\s\S ]\n
2在javascript内容中，要先创建行和单元格，再在<tbody>中添加行，如下
[code]
row=documentcreateElement("tr"); //创建行
td1=documentcreateElement("tr"); //创建单元格
td1appendChild(documentcreateTextNode("content")); //为单元格添加内容
rowappendChild(td1); //将单元格添加到行内
documentgetElementById("rows")append(row); //将行添加到<tbody>中
因为静态页面之间很难直接获取参数，一个笨方法就是通过url传递参数，然后在另外一个页面用javascript解析url,下面的代码可供参考：
<script>
urlinfo=windowlocationhref; //获取当前页面的url
len=urlinfolength;//获取url的长度
offset=urlinfoindexOf("");//设置参数字符串开始的位置
newsidinfo=urlinfosubstr(offset,len)//取出参数字符串 这里会获得类似“id=1”这样的字符串
newsids=newsidinfosplit("=");//对获得的参数字符串按照“=”进行分割
newsid=newsids[1];//得到参数值
alert("您要传递的参数值是"+newsid);
</script>
然后就是利用js设置值到bhtml中
以上就是关于js如何实现点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）全部的内容，包括:js如何实现点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）、在html中如何把图片放到所指定的位置、Java如何做动态表格等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）