使用jquery选择表的行和列并更新其内容

时间:2015-10-29 08:14:04

标签: javascript jquery html

我有一个HTML表格,后跟一个简单的表单,它接受表格行和列,如下所示

 <table border="1" style="width:100%">
   <tr>
     <td>Row 1 Col1</td>
     <td>Row 1 Col2</td>
     <td>Row 1 Col3</td>
     <td>Row 1 Col4</td>
     <td>Row 1 Col5</td>
     <td>Row 1 Col6</td>
   </tr>
   <tr>
     <td>Row 2 Col1</td>
     <td>Row 2 Col2</td>
     <td>Row 2 Col3</td>
     <td>Row 2 Col4</td>
     <td>Row 2 Col5</td>
     <td>Row 2 Col6</td>
   </tr>
     <tr>
     <td>Row 3 Col1</td>
     <td>Row 3 Col2</td>
     <td>Row 3 Col3</td>
     <td>Row 3 Col4</td>
     <td>Row 3 Col5</td>
     <td>Row 3 Col6</td>
   </tr>   
 </table> 
 <form>
      <input type="text" placeholder="Row" value="row"/>
      <input type="text" placeholder="Column" value="column"/>
      <button id="submitButton" type="submit"> Submit </button>
 </form>

表行和列可以变化,可以有n个行和列。我想做的是基于用户输入(选择行和列并提交它)我想更新用户选择的行和列的内容以说&#34; Hello&#34;。如果用户选择列,则不可用的行组合会提示错误消息。我怎么能在jquery中这样做。

先谢谢。

3 个答案:

答案 0 :(得分:1)

你可以这样使用,

$("#submitButton").click(function (e) {
    e.preventDefault();
    var r = parseInt($("#row").val()) - 1;
    var c = parseInt($("#column").val()) - 1;
    $("table").find("tr").eq(r).find("td").eq(c).text("hello");

});

Fiddle

这是一种基于undex的方法。首先,您需要使用.eq()选择器找到第n行。由于索引从0开始,因此需要将实际值减1。

您可以使用.find()方法获取所有子元素。

答案 1 :(得分:1)

 def adaptive_checkout

    listing = Listing.find(session[:listing_id].to_f)


    total_amount_in_cents = listing.price_cents

    service_charge_rate = 5 #in percentage 5%

    service_charge_in_cents = total_amount_in_cents * service_charge_rate / 100

    service_charge_in_dollor = service_charge_in_cents / 100.00 # this will be for secondary user (Admin of the system)

    total_amount_in_dollar = total_amount_in_cents / 100.00 # this will be for primary receiver

    seller_email = PaypalAccount.where(person_id: listing.author_id).last.email # This is the Primary receiver

    system_admin_email = PaypalAccount.where(active: true)
                             .where("paypal_accounts.community_id IS NOT NULL && paypal_accounts.person_id IS NULL")
                             .first.email # This is the Secondary receiver


    recipients = [
        {
            email: seller_email,
            amount: total_amount_in_dollar ,
            primary: true
        },

        {
            email: system_admin_email,
            amount: service_charge_in_dollor,
            primary: false
        }
    ]

    response = ADAPTIVE_GATEWAY.setup_purchase(
        action_type: "CREATE",
        return_url: "http://esignature.lvh.me:3000/en/transactions/status",
        cancel_url: "http://esignature.lvh.me:3000/",
        ipn_notification_url: "http://0dbf7871.ngrok.io/en/transactions/notification",
        receiver_list: recipients
    )


    ADAPTIVE_GATEWAY.set_payment_options(

        pay_key: response["payKey"],
        receiver_options: [
            {
                description: "Your purchase of #{listing.title}",
                invoice_data: {
                    item: [
                        {
                            name: listing.title,
                            item_count: 1,
                            item_price: total_amount_in_dollar,
                            price: total_amount_in_dollar
                        }
                    ]
                },
                receiver: {email: seller_email}
            },
            {
                description: "Service charge for purchase of #{listing.title} ",
                invoice_data: {
                    item: [
                        {
                            name: "Service charge for purchase of #{listing.title}",
                            item_count: 1,
                            item_price: service_charge_in_dollor,
                            price: service_charge_in_dollor
                        }
                    ]
                },
                receiver: {email: system_admin_email}
            }
        ]
    )



    # For redirecting the customer to the actual paypal site to finish the payment.
    redirect_to (ADAPTIVE_GATEWAY.redirect_url_for(response["payKey"]))
  end

pictured here

答案 2 :(得分:1)

$('#submitButton').click(
 function(){
   var numrow = $('#numrow').val();
   var numcol = $('#numcol').val();
   var enttotal = numrow * numcol;
   var lenrow = $('.dataupdate tr').length;
   var lencol = $('.dataupdate tr:first-child td').length;
   var tcol  = $('.dataupdate tr td').length;
 if(numrow <= lenrow &&  numcol <= lencol && enttotal <= tcol){ 
   $('.dataupdate tr:nth-child('+numrow+') td:nth-child('+numcol+')').html('Hello')
     }
  else { alert('there is no such column in this table'); }
  });

这是工作小提琴链接 http://jsfiddle.net/6vj92vcp/