0

これが私の現在のコードです。

$(document).ready(function () {
    $(".stripeMe tr").mouseover(function () {
        $(this).addClass("over");
    }).mouseout(function () {
        $(this).removeClass("over");
    });
    $(".stripeMe tr:even").addClass("alt");
});


<table class="stripeMe" width="100%">
    <tr>
        <td style="width:85%">Product Name</td>
        <td style="width:5%; text-align:right">Price (each)</td>
        <td style="width:5%; text-align:center">Quantity</td>
        <td style="width:5%"></td>
    </tr>

    <% foreach (var cart in Model.Carts) { %>
        <tr id="row-<%: cart.RecordID %>">
            <td>
                <%: Html.ActionLink(Model.pr.GetProduct(cart.ProductID).ProductName.Length > 52 ? (string)Model.pr.GetProduct(cart.ProductID).ProductName.Substring(0, 52) + "..." :  (string)Model.pr.GetProduct(cart.ProductID).ProductName, "Elaborate", "Product", new { ProductID = cart.ProductID, RecordID = cart.RecordID }, null)%>
            </td>
            <td style="text-align:right">
                <%: (string)String.Format("{0:F}",Model.pr.GetProduct(cart.ProductID).UnitPrice) %>
            </td>
            <td>
                <input type="text" disabled="disabled" style="text-align:center; border-width:0; background-color:transparent" id="column-Quantity-<%: cart.RecordID %>" value="<%: cart.Quantity %>"></input>
            </td>
            <td>
                <%: Ajax.ActionLink("Remove from Cart", "RemoveFromCart", new { RecordID = cart.RecordID }, new AjaxOptions {OnSuccess = "handleUpdate" })%>
            </td>
        </tr>
    <% } %>

    <tr>
        <td><hr />Total</td>
        <td align="right">
            <hr />
            <span id="cart-total"><%: (string)String.Format("{0:F}",Model.CartTotal) %></span>
         </td>
         <td align="center">
             <hr />
             <span id="cart-quantity"><%: Model.CartQuantity %></span>
         </td>
         <td><hr />&nbsp;</td>
     </tr>
 </table>

どのように変更しても、機能しません。最新バージョンの Firefox を使用しています。

<td style="width:85%">Product Name</td>
4

3 に答える 3

1

table-layout:fixedテーブルにスタイルを追加してみてください。

<table class="stripeMe" width="100%" style="table-layout:fixed">

変化をより明確にします。

ただし、この設定を使用すると、コンテンツが隣接する にオーバーフローしますtd

于 2013-01-18T01:52:53.660 に答える
1

ここに実用的なフィドルがあります: http://jsfiddle.net/DEU7d/1/

クラス .alt は、ページの読み込み時に「偶数」行に追加されています。(私は.altの色を追加しました)

クラス .over は、 mouse over と out の間でトグルされています。

CSS

.over { background:#88aa4d; }
.alt { color: #ff881a; }

JS

$(document).ready(function () {

$(".stripeMe tr").mouseover(function () {
    $(this).addClass("over");
}).mouseout(function () {
    $(this).removeClass("over");
});

$(".stripeMe tr:even").addClass("alt");
});

HTML

<table class="stripeMe" width="100%">
    <tr>
        <td style="width:85%">Product Name</td>
        <td style="width:5%; text-align:right">Price (each)</td>
        <td style="width:5%; text-align:center">Quantity</td>
        <td style="width:5%"></td>
    </tr>
        <tr id="row-1">
            <td>
                linktext1
            </td>
            <td style="text-align:right">
               price
            </td>
            <td>
                <input type="text" disabled="disabled" style="text-align:center; border-width:0; background-color:transparent" id="column-Quantity-1" value="12"></input>
            </td>
            <td>
                iink text2
            </td>
        </tr>
      <tr class="even" id="row-2">
            <td>
                linktext1
            </td>
            <td style="text-align:right">
               price
            </td>
            <td>
                <input type="text" disabled="disabled" style="text-align:center; border-width:0; background-color:transparent" id="column-Quantity-2" value="21"></input>
            </td>
            <td>
                iink text2
            </td>
        </tr>


    <tr>
        <td><hr />Total</td>
        <td align="right">
            <hr />
            <span id="cart-total">total</span>
         </td>
         <td align="center">
             <hr />
             <span id="cart-quantity">quantity</span>
         </td>
         <td><hr />&nbsp;</td>
     </tr>
 </table>
于 2013-01-18T02:41:09.353 に答える
0

まず、特に「rae1n」、「Deminoth Bono」、「tristan」、「OMG」のおかげで、私を助けてくれたすべての人に「ありがとう」と言いたいです。皆さんの努力はすべて、私が問題を理解して解決するのを助けてくれます。

最初にFirefoxの「エラーコンソール」を使用します。長い間そこにあるjavascriptの問題を見つけてから修正しますが、残念ながら「幅」の問題はまだ残っています。

「rae1n」と「OMG」の投稿から2番目に、これは「幅」の問題ではないかもしれないと思い始めたので、ある日考えた後、周りを見回し始めました......最終的に問題はtype="text"タグを入力します。input type = "text"に幅を指定しないと、固定幅のテキストボックスが200pxのようにレンダリングされるため、問題が発生します。したがって、「td」のパーセンテージをどのように変更しても、同じように見えます。そこで、style = "width:100%"をinput type = "text" ...に追加してから、「td」の幅を変更します。「td」の幅は正しく変更されていることを示しています。問題は修正されます。以下のコードは私がそれを修正する方法です。

<input type="text" disabled="disabled" style="width:100%; text-align:center; border-width:0; background-color:transparent" id="column-Quantity-<%: cart.RecordID %>" value="<%: cart.Quantity %>"/> 
于 2013-01-19T15:17:25.887 に答える