Table 点击单元格编辑并获取对应的行列

mac2024-04-14  34

如何进行编辑单元格数据:

在table中的td中加入contentEditable='true'  就可以进行编辑单元格了

如何点击时获取单元格对应的行列:

在table中加入onclick事件  列入:

<table οnclick="TabClick()"  class="hovertable" style="margin:0px auto;" id="lousj">

 </table>

// 例如:

mui.ajax({                 url: "您的url",                 type: "get",                 dataType: "json",                 crossDomain: true,                 async: false,                 timeout: 10000,                 success: function(data) {                     var str = ""                     str += "<th  hidden='hidden'>楼ID</th>"  //隐藏不想显示但有用的数据                     str += "<th >供温</th>"                     str += "<th >回温</th>"                     str += "<th >瞬时热量</th>"                     for(let i = 0; i < data.length; i++) {                         str += "<tr>"

                         //隐藏不想显示但有用的数据  // hidden='hidden'                          str += "<td  hidden='hidden'>" + (data[i].rt_BuildingNo_id == null ? "" : data[i].rt_BuildingNo_id) + "</td>"                         str += "<td title='AiValue1' contentEditable='true'  οnblur='funtd(this)'>" + ( data[i].AiValue1== null ? "" : data[i].AiValue1) + "</td>"                         str += "<td title='AiValue2' contentEditable='true'>" + (data[i].AiValue2 == null ? "" : data[i].AiValue2) + "</td>"                         str += "<td title='AiValue5' contentEditable='true'>" + (data[i].AiValue5 == null ? "" : data[i].AiValue5) + "</td>"                               str += "</tr>"                     }                     real.innerHTML = str                 }             })

//调用table的点击事件 获取点击时对应的行列 数据 title

function TabClick() {     var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td       alert("行号:" + (td.parentElement.rowIndex) + ",列号:" + td.cellIndex+",值:,"+td.innerHTML);                alert(td.title )  //这是获取对应的表头 }

 

//这里是table的id 获取您想要的数据 我这里取得是隐藏的ID

$("#lousj").on("click", "tr",function() {                 var td = $(this).find("td");                      alert("楼的Id:" + td.eq(0).html())  //td.eq(0).html()是获取您table的第一行的值也可以是td.eq(0).text()         });

//如果报$不存在   引用js即可

 

//以上有写的不对的地方还望各位大神指出 

 

最新回复(0)