CODEWITHSUNDEEP
jqueryhtml
kenreal
kenreal

Reputation: 101

How to get selected row details in Jquery

I don't know how to get the selected row details in jQuery. For example, I select first two rows in my table.

I want to submit to next page, and the second page can shows the selected two row.

This is the picture of selected row

And here is the coding for my second page.

$(document).ready(function () {
  $('#card-type').html(simpleStorage.get('cardType'));
//my code stuck here.

Anyone can give me some ideas?

Upvotes: 2

Views: 634

Answers (1)

Jax Teller
Jax Teller

Reputation: 1467

As said @krushna, you can try to use localStorage.

I never use it before but i wanted try for your needs.

Here is my solution, of course, you can improve it, i only give a way to solve your problem. This following code works for your need :

First, my page p1.html

The html : I just try to replicate your html from your picture.

  <body>
    <table>
      <tr>
        <th>Primary</th>
        <th>Tag/untag</th>
        <th>Account</th>
      </tr>
      <tr>
        <td><input type="radio" class="primary" name="rd_prim" id="rd_prim1" ></td>
        <td><input type="checkbox" class="tag" id="check_1"></td>
        <td><span class="account" id="acc1">123456789</span></td>
      </tr>
      <tr>
        <td><input type="radio" class="primary" name="rd_prim" id="rd_prim2" ></td>
        <td><input type="checkbox" class="tag" id="check_2" ></td>
         <td><span class="account" id="acc2">987654321</span></td>
      </tr>
    </table>
    <input type="button" value="submit" id="smt">
  </body>

The Jquery :

    $(document).ready(function() {
      localStorage.clear();
      $("#smt").click(function() {
        var data_length = $('table').find("tr").not(":first").length-1;
        var i = 0;
        localStorage.setItem("data_length", data_length);
        $.each($('table').find("tr").not(":first"), function() {
            $.each($(this).find("td"),function() {
                if ($(this).children().is("span")) {
                  localStorage.setItem($(this).children().attr("class")+""+i,  $(this).children().text());
                } else {
                  localStorage.setItem($(this).children().attr("class")+""+i,  $(this).children().is(":checked"));
                }
            })      
        i++;
        })
        window.location = "p2.html";
      })
    })

And now the second page : p2.html Edited

The html : 

<body>
    <div id="result">
        <table>
            <tr>
                <th>Primary</th>
                <th>Accounts</th>
            </tr>

        </table>
    </div>
</body>

The JQuery : 

  $(document).ready(function() {
        var data_length = localStorage.getItem("data_length");
        for (var i = 0; i <= data_length; i++) {
            var primary = localStorage.getItem("primary"+i) == "true"?"checked":"";
            var tag = localStorage.getItem("tag"+i) == "true" ?"true":"false";
            var account = localStorage.getItem("account"+i);
            if (tag != "true" ) {
                continue;
            }
            $("table").append("<tr><td><input type='radio' name='rd_prim' "+primary+"></td><td><span class='account'>"+account+"</span></td></tr>");
        }
  })

Hope this will help.

Upvotes: 2

Related Questions