Get the Contents of a Table Row With a Button Click

$('.btn-warning').click(function() {  var ids = $(this).closest('tr').find('.id').text();  alert(ids);});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table><tbody id="list">  <tr class='row'>    <td class='id'>b17dcat126</td>    <td class='name'>Nguyễn Nhật Minh</td>    <td class='phone'>010313234</td>    <td class='sex'>Nam</td>    <td>      <button class='btn btn-warning' data-toggle='modal' data-target='#update'>Sửa</button>    </td>  </tr></tbody></table>

Check table row number on button click

I would suggest using a grid view, or even a list view.

so, say you have this markup:

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
          cssclass="table"  width="30%">
            <Columns>
                <asp:BoundField DataField="Nome" HeaderText="Nome"  />
                <asp:BoundField DataField="timestamp" HeaderText="timestamp" />

                <asp:TemplateField HeaderText="Select" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Button ID="cmdView" runat="server" Text="View"  CssClass="btns"/>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

And now your code can be this:

           string query = "SELECT nome, timestamp FROM dbo.project";
            SqlCommand sqlCmd = new SqlCommand(query, sqlCon);

            DataTable rstData = new DataTable();
            rstData.Load(sqlCmd.ExecuteReader());

            GridView1.DataSource = rstData;
            GridView1.DataBind();

(I left out the parameter's - but you do want to keep them as you have).

So, now we see this:

Ok, so now add a event to the button click:

And our button code click is thus:

   protected void cmdView_Click(object sender, EventArgs e)
    {
        Button btn = sender as Button;
        GridViewRow gRow = btn.NamingContainer as GridViewRow;

        Debug.Print("Row index click = " + gRow.RowIndex.ToString());
        Debug.Print("First column value = " + gRow.Cells[0].Text);
        DateTime? myDt = DateTime.Parse(gRow.Cells[1].Text);
        Debug.Print("2nd column value = " +  myDt.ToString());
    }

OutPut:

Row index click = 3
First column value = SR-71A.jpg
2nd column value = 2022-02-05 7:22:00 PM

How to get row value from table when delete button is clicked?

Add <input type="hidden" name="deletefile" value="" id="deletefileID"> outside your table.

Now set the value of button as {{dt.url}.

<button type="button" value="{{dt.url}" class="fa fa-trash-o btn btn-danger" data-toggle="modal" data-target="#exampleModal{{forloop.counter}}">Delete</button>

This is to use this value to set value of hidden input tag whenever delete button is clicked.

$('.btn-danger').on('click',function(){
       var tmp = this;
       tmp = tmp.value;
       $('#deletefileID').val(tmp);
});

Add multiple table rows when button clicked

Is there any reason to load the file instead of cloning the element you need, especially since it already appears in your DOM? This is, in my opinion, cleaner and easier to manage.

I think this code below should do the same thing without having to load another file (which I had Cross origin issues with)

EDIT
Now clones entire table instead of just one row. Be careful with the names of inputs, since they are cloned too.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<div class="form_container">
    <form method="POST" action="actionPage.php">
        <div class="table_container">
            <table id="clone" border="2">
                <tr>
                    <tr >
                        <td><label>Sr.No :</label></td>
                        <td><input type = "number" class="SrNo" name="SrNo" value="1" readonly></td>
                        <td><label>Design number :</label></td>
                        <td><input type="text" class="designNo" name="designNumber"></td>
                    </tr>
                    <tr>                
                        <td><label>Fabric quality :</label></td>
                        <td><select name="fabricSelect">
                            <option value="Fabric1" name="fabric1">Fabric1</option>
                            <option value="Fabric2" name="fabric2">Fabric2</option>
                            <option value="Fabric3" name="fabric3">Fabric3</option>
                            <option value="Fabric4" name="fabric4">Fabric4</option>
                            </select>           
                        <td><label>Color matching :</label></td>
                        <td><input type="select" class="colorMatch" name="colorMatch"></td>
                    </tr>
                    <tr>
                        <td><label>Quantity :</label></td>
                        <td><input type="number" class="quantity" name="quantity"></td>
                        <td><label>Printing type :</label></td>
                        <td><select name="printSelect">
                            <option value="Print1">Print1</option>
                            <option value="Print2">Print2</option>
                            <option value="Print3">Print3</option>
                            <option value="Print4">Print4</option>
                            </select>
                        </td>           
                    </tr>
                    <tr>
                        <td ><label>Rate :</label></td>
                        <td colspan="2"><input type="number" name="rate"></td>
                    </tr>
                    <tr class="newForm">
                    </tr>
                </tr>
            </table>
            
        </div>
        <input type="submit" id="submit_btn" class="class_btn">
    </form>
    <button class="addButton">Add more tab</button>
</div>

<script>
    $(document).ready(function() {
        var flag = 0;
        $(".addButton").click(function(e) {
            if(flag != 5) {
                flag += 1;
                var clone = $("#clone").clone();
                clone.find("input[name=SrNo]").val(flag+1);
                clone.appendTo($(".table_container"));
            }
            else {
                e.preventDefault();
            }
        });
    })
</script>

Get the table row data with a click

You can do this:

$("tr.myTable").click(function() {
    var tableData = $(this).children("td").map(function() {
        return $(this).text();
    }).get();

    console.log(tableData);
});

Returns a nice array of your data, then you can display it how you want.

Demo: http://jsfiddle.net/Sc5N7/

---

Related Topics