Select input tag in the same row from a table on clicking an anchor tag in the same row


December 2018


1k time


Sample Html(This only contains one of many more row).

<table id="ctl00_ContentPlaceHolder1_categoryTable" class="categoryTable sortAsc editInputs" border="0">
     <input name="ctl00$ContentPlaceHolder1$ctl17" type="text" value="307349_335692806541952_16061425_n.jpg" readonly="readonly" />
    <td><input name="ctl00$ContentPlaceHolder1$ctl18" type="text" value="key1 " readonly="readonly" /></td>
    <td><a href="download.aspx filename=307349_335692806541952_16061425_n.jpg&type=image">307349_335692806541952_16061425_n.jpg</a></td>
    <a href="javascript:void(0)" class="editLinkClass">Edit </a><a href="javascript:void(0)" class="deletetLinkClass"> Delete</a><a href="javascript:void(0)" class="updateLinkClass" style="display:none;">Update</a><a href="javascript:void(0)" class="cancelLinkClass" style="display:none;"> Cancel</a>

My Javascript

$(document).ready(function () {
            console.log("document ready")
            $(".categoryTable tr td a").click (function (event) {
                console.log($(this).text() + "click detected");
                if ($(this).text() === "Edit ") {//compare with "Edit " not "Edit"
                    console.log($(this).parent().parent().children('td input').text());
                    $(this).siblings(".deletetLinkClass").attr("style", "display:none");
                    $(this).siblings(".updateLinkClass").attr("style", "display:;");
                    $(this).siblings(".cancelLinkClass").attr("style", "display:;");
                    $(this).attr("style", "display:none")
                    console.log("no EDit");

What i am trying to do is select the input tags in the same row tr but different td on click of an anchor tag in the same row. I have tried a lot of combinations of the following jQuery statement with no success. Please Help. $(this).parent().parent().children('td input').text() Here this represents the clicked anchor tag. To be more clear i don't want to select all the input tags in the table, just the ones in the same row.

3 answers


используя parents()и find().

и получить значение ввода, использования val()и не text()..

$(this).parent().parent().children('td input').text();

попробуй это

var inputs=$(this).parents('tr').find('input');
$.each(inputs,function(){  //<---- loop since you have multiple input
    console.log($(this).val()); //.val() since val() is used to get the input value..

или с помощью closest()и find().

var inputs=$(this).closest('tr').find('input');

используя контекст

var inputs = $('td input', $(this).closest('tr')).val();

работая скрипку здесь


Вы можете сделать это следующим образом:

$('td input', $(this).closest('tr')).val();

Попробуйте ниже код, чтобы найти вход из данной строки

$(this).closest('tr').find('td input').text()