1，Javascript *** 作table,tr,td ，代码如下：function messageSort() { --函数名var message=document.getElementById("message").value--添加的
内容(下面有对应的html)if(name == "" ) return--如果添加为空,返回var row = document.createElement("tr")//创建tr的row.setAttribute("id", name)--设置row的属性. var cell = document.createElement("td")//创建tdcell.appendChild(document.createTextNode(name))//td里
注入文本row.appendChild(cell)//将TD注入TRvar deleteButton = document.createElement("input")//这部分是添加删除button按钮deleteButton.setAttribute("type", "button")deleteButton.setAttribute("value", "删除")deleteButton.onclick = function () { deleteSort(name)}cell = document.createElement("td")cell.appendChild(deleteButton)//注入按钮row.appendChild(cell)//将TD注入TRdocument.getElementById("sortList").appendChild(row)//将TR注入到相应地方(sortList可以看下面html)var cell5 = document.createElement("td")cell.style.background="#ffffff"//背景颜色设置row1.style.color="#ffffff"//字体颜色设置cell5.style.display = "none" //ie不支持setAttribute("style", "display:none")// <td style="display:none" >dd</td>直接写TD是这样..cell5.appendChild(document.createTextNode(zdid))row.appendChild(cell5)}// 删除内容function deleteSort(id) {//这个函数为上面的删除button调用的var rowToDelete = document.getElementById(id)var sortList = document.getElementById("sortList")sortList.removeChild(rowToDelete)}</script></head><body><table border="0" cellspacing="0" width="400" bgcolor="#f5efe7"><tr><td height="20">增加内容:</td><td><input id="message" type="text"></td><td><a href="javascript:messageSort()">添加</a></td></tr></table><table border="1" width="400"><tr><td height="20" align="center">内容:</td><td> *** 作</td></tr><tbody id="sortList"></tbody></table></body>2，一般情况下定义一个效果良好的
表格采用下面的属性定义方式代码：<table cellSpacing="0" cellPadding="0" border='1' bordercolor="black" style='border-collapse:collapsetable-layout: fixed'></table>当某个td中没有内容或者没有可见元素时，td的border也会消失。解决方案就是给table添加样式border-collapse:collapse 代码段：.text-overflow{ display:block/*内联对象需加*/ width:31emword-break:keep-all/* 不换行 */ white-space:nowrap/* 不换行 */ overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/ } 3，但对于表格table来讲是有些不同，代码段：table{ width:30emtable-layout:fixed/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } td{ width:100%word-break:keep-all/* 不换行 */ white-space:nowrap/* 不换行 */ overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/ }$table.bootstrapTable({
method: 'post',//数据请求方式
//contentType: "application/x-www-form-urlencoded",
url: oTable.QueryUrl,//请求数据的地址
height: $(window).height() - 100,
striped: true,
pagination: true,
singleSelect: false,
pageNumber: 1,
pageSize: 10,
pageList: [5, 10, 15],
uniqueId: "ID",
sidePagination: "server", //服务端请求
queryParams: oTable.queryParams,
queryParamsType: "",
columns: [{
field: 'ID',
title: 'ID',
width: 100,
align: 'center',
valign: 'middle',
sortable: true,
//formatter: idFormatter
}, {
field: 'Name',
title: '姓名',
width: 100,
align: 'center',
valign: 'middle',
sortable: true,
//formatter: nameFormatter
}, {
field: 'operate',
title: ' *** 作',
width: 100,
align: 'center',
valign: 'middle',
formatter: operateFormatter,
events: operateEvents
}],
onLoadSuccess: function () {
//alert("加载成功")
},
onLoadError: function () {
alert("加载出错了")
}
})
创建和插入例子，按需自改
/** * 创建表格 * id 为表格id * arr 为表格表头 */ function createTable(id,arr){ var table = document.createElement('table') table.setAttribute("id",id) table.setAttribute("className","TableLine")//设定样式 table.setAttribute("width",'98%') table.setAttribute("cellpadding",'3') table.setAttribute("cellspacing",'0') var row = table.insertRow() row.style.setAttribute("backgroundColor","#e0e0e0") for (var i = 0i <arr.lengthi++) { var col = row.insertCell() if(i==0){ col.setAttribute("width",'3%') } col.setAttribute("className","border:1px solid #9BC2E0") col.setAttribute("align","center") col.style.fontSize="13px" col.style.fontWeight="Bold" //var style = document.createAttribute("styles") //style.nodeValue = "font-size:large" //col.setAttributeNode(style) col.innerHTML = arr[i] } //alert(table.outerHTML) return table }
/** * 向表格插入一行 */ function addRow(table,id,arr){var row = table.insertRow() row.setAttribute("id",id) row.onclick=function (){} for(var i=0i<arr.lengthi++){ var col = row.insertCell() col.innerHTML = arr[i] //col.innerText = arr[i] col.setAttribute("title",arr[i]) } }
微信扫一扫
支付宝扫一扫
评论列表（0条）