使用工具提示和省略号作为表格单元格的值 [英] Using Tooltip and Ellipsis for table cell value

问题描述

我正在运行时向表中添加行，我想像下面的代码一样为表单元格值提供省略号和工具提示.

这段代码显示了省略号和工具提示，但是问题是，如果我要绑定到表格单元格的值中有空格，那么它将显示工具提示直到第一个空格，即如果我要在表格中绑定产品名称1单元格，那么它会显示简单的工具提示，而不是产品名称1.

请帮助

Hi,

I am runtime Adding rows to the table and i want to give Ellipsis and tooltip for the table cell value as i have done in the following code.

This code shows the ellipsis as well as tooltip but the problem is that if there is space in the value that i want to bind to the table cell then it shows tooltip till the first space i.e if i want to bind the Product Name 1 in table cell then it shows the tooltip of simply Product not Product Name 1.

Please Help

$('#tblProducts tr:last').after('<tr  style="removed: pointer" onmouseover="HighLight(this);" onmouseout="UnHighLight(this);"  onclick="Select(this);" id="manageablerow"><td style="overflow:hidden; text-overflow:ellipsis;white-space:nowrap; width:90px"  title =' + productCategoryName + ' id="productCategoryName">' + productCategoryName +
                                  '</td><td style="overflow:hidden; text-overflow:ellipsis;white-space:nowrap; width:90px"  title =' + productName + ' id="productName">' + productName +
                                   ' </td><td id="quantity">' + quantity +
                                   ' </td><td id="included">' + include +
                                   ' </td><td id="unitPrice">' + unitPrice +
                                   ' </td><td id="price">' + price +
                                   ' </td><td id="discount">' + finalDisc +
                                   ' </td><td id="totalProductPrice">' + totalProductPrice +
                                    '</td><td id="showImage">' + addImage +
                                   ' </td><td><a href="#"  id="btnEdit">Edit</a> <a href="#" id="btnDelete">Delete</a></td><td><input type="hidden" id="hdnProductCategory" value="' + productType + '"></td><td><input type="hidden" id="hdnProductID" value="' + productID + '"></td></td></tr>');
                       });

谢谢，

Umesh Tayade

Thanks,

Umesh Tayade

推荐答案

(' #tblProducts tr:last ').after(' < tr style ="removed:pointer" onmouseover ="HighLight(this );"onmouseout =" UnHighLight(this);"onclick =" Select(this);"id =" manageablerow>< td style =" overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:90px"title =' + productCategoryName + id =" productCategoryName>' + productCategoryName + ' </td>< td style ="overflow:hidden; text-overflow:省略号；空白: nowrap; width:90px"title =' + productName + id =" productName>' + productName + ' </td>< td id ="quantity">' +数量+ ' </td>< td id ="included">' + include + ' </td>< td id ="unitPrice">' + unitPrice + ' </td>< td id ="price">' +价格+ ' </td>< td id ="discount">' + finalDisc + ' </td>< td id ="totalProductPrice">' + totalProductPrice + ' </td>< td id ="showImage">' + addImage + ' </td>< td>< a href =#" id ="btnEdit"> Edit< ;/a> < a href =#" id ="btnDelete">删除</a></td>< td><输入类型="hidden" id ="hdnProductCategory" value =' + productType + ' ></td>< td><输入type =" hidden"id = "hdnProductID" value =' + productID + "></td></td></tr>'); });

('#tblProducts tr:last').after('<tr style="removed: pointer" onmouseover="HighLight(this);" onmouseout="UnHighLight(this);" onclick="Select(this);" id="manageablerow"><td style="overflow:hidden; text-overflow:ellipsis;white-space:nowrap; width:90px" title =' + productCategoryName + ' id="productCategoryName">' + productCategoryName + '</td><td style="overflow:hidden; text-overflow:ellipsis;white-space:nowrap; width:90px" title =' + productName + ' id="productName">' + productName + ' </td><td id="quantity">' + quantity + ' </td><td id="included">' + include + ' </td><td id="unitPrice">' + unitPrice + ' </td><td id="price">' + price + ' </td><td id="discount">' + finalDisc + ' </td><td id="totalProductPrice">' + totalProductPrice + '</td><td id="showImage">' + addImage + ' </td><td><a href="#" id="btnEdit">Edit</a> <a href="#" id="btnDelete">Delete</a></td><td><input type="hidden" id="hdnProductCategory" value="' + productType + '"></td><td><input type="hidden" id="hdnProductID" value="' + productID + '"></td></td></tr>'); });

谢谢，

Umesh Tayade

Thanks,

Umesh Tayade

我认为您正在找到http://jsfiddle.net/bnjSs/7/

i think you are finding http://jsfiddle.net/bnjSs/7/

这篇关于使用工具提示和省略号作为表格单元格的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！