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

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

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

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

在table中加入onclick事件列入：

</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即可

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

花归去

原创文章 12 获赞 9 访问量 7万+

关注私信

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

猜你喜欢