当我从下拉框中选择编辑选项时,我想让我的表格行可编辑。以前它很好,但那次我在所有行中使用了Edit按钮。但现在我通过下拉来制作编辑按钮。但现在它不起作用。我无法在代码中找到任何错误,但仍无法正常工作。 我的html表是
<div class="table-responsive">
<table class="table table-hover" id="myTable" >
<thead>
<tr>
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>johncarter@mail.com</td>
<td>John</td>
<td>Carter</td>
<td></td>
</tr>
<tr>
<td>peterparker@mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td></td>
</tr>
</tbody>
</table>
<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
<li><a tabindex="-1" class="btn btn-mini btnEdit" >Edit</a></li>
</ul>
<script type="text/javascript">
(function ($, window) {
$.fn.contextMenu = function (settings) {
return this.each(function () {
// Open context menu
$(this).on("contextmenu", function (e) {
//open menu
$(settings.menuSelector)
.data("invokedOn", $(e.target))
.show()
.css({
position: "absolute",
left: getLeftLocation(e),
top: getTopLocation(e)
})
.off('click')
.on('click', function (e) {
$(this).hide();
var $invokedOn = $(this).data("invokedOn");
var $selectedMenu = $(e.target);
settings.menuSelected.call(this, $invokedOn, $selectedMenu);
});
return false;
});
//make sure menu closes on any click
$(document).click(function () {
$(settings.menuSelector).hide();
});
});
function getLeftLocation(e) {
var mouseWidth = e.pageX;
var pageWidth = $(window).width();
var menuWidth = $(settings.menuSelector).width();
// opening menu would pass the side of the page
if (mouseWidth + menuWidth > pageWidth &&
menuWidth < mouseWidth) {
return mouseWidth - menuWidth;
}
return mouseWidth;
}
function getTopLocation(e) {
var mouseHeight = e.pageY;
var pageHeight = $(window).height();
var menuHeight = $(settings.menuSelector).height();
// opening menu would pass the bottom of the page
if (mouseHeight + menuHeight > pageHeight &&
menuHeight < mouseHeight) {
return mouseHeight - menuHeight;
}
return mouseHeight;
}
};
})(jQuery, window);
$("#myTable td").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu) {
var msg = "You selected the menu item '" + selectedMenu.text() +
"' on the value '" + invokedOn.text() + "'";
}
});
function Save() {
var par = $(this).parent().parent();
var tdName = par.children("td:nth-child(1)");
var tdPhone = par.children("td:nth-child(2)");
var tdEmail = par.children("td:nth-child(3)");
tdName.html(tdName.children("input[type=text]").val());
tdPhone.html(tdPhone.children("input[type=text]").val());
tdEmail.html(tdEmail.children("input[type=text]").val());
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
};
function Edit() {
var par = $(this).parent().parent();
var tdParameterName = par.children("td:nth-child(1)");
var tdParameterValues = par.children("td:nth-child(2)");
var tdRemarks = par.children("td:nth-child(3)");
var tdButtons="";
tdParameterName.html("<input type='text' id='txtName' value='" + tdParameterName.html()
+ "'/>");
tdParameterValues.html("<input type='text' id='txtPhone' value='" + tdParameterValues.html()
+ "'/>");
tdRemarks.html("<input type='text' id='txtEmail' value='" + tdRemarks.html()
+ "'/>");
tdButtons.html("<a class='btn btn-mini btnSave'>Save</a>");
$(".btnSave").bind("click", Save);
$(".btnEdit").bind("click", Edit);
};
function Delete() {
var par = $(this).parent().parent();
par.remove();
};
$(function() {
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
});
</script>
基本上我启用了右键菜单。点击右下拉框后会打开。我将点击编辑按钮然后我的行将变为可编辑。我为contextMenu和编辑按钮添加了jquery。很抱歉让代码非常脏,但目前我正在练习,而且我也是新手。
答案 0 :(得分:0)
查看控制台为您提供的输出。点击编辑会产生TypeError: tdButtons.html is not a function
的结果,这两行来自两行:
var tdButtons="";
和
tdButtons.html("<a class='btn btn-mini btnSave'>Save</a>");
因此,您正在创建一个空字符串并尝试使用它,就像它是一个jQuery对象一样。您将需要更改这些行以使其再次起作用。