Как получить входное текстовое значение изнутри td

<tr>
 <td>
      <input type="text" name="desc[]">
 </td>
 <td>
      <input type="text" name="duration[]">
 </td>
 <td>
      <input type="text" name="start[]" class="start">
 </td>
 <td>
       <input type="text" name="wait[]">
 </td>
 <td>
       <input type="text" name="end[]">
 </td>
 <td>
      <input type="text" name="phone[]">
 </td>
</tr>

У меня есть несколько строк. Мне нужно получить значения из всех tds в событии keyup на td с началом ввода имени (и мне также нужно избегать значений desc [] и phone []). Поскольку они много, я не могу идти с идентификаторами, нужна помощь в родительском подходе с jquery.

Мне удалось достичь родительского tr на событии keyup на вышеупомянутом td, но не смог получить доступ к значениям поля ввода в других tds. код jquery, который я использовал

$(document).ready(function(){
    $(".start").keyup(function(){
        alert($(this).parent().get(-3).tagName);
    })
});

Ответы

Ответ 1

А я думаю, теперь понимаю. Посмотрите, действительно ли это то, что вы хотите:

$(".start").keyup(function(){
    $(this).closest('tr').find("input").each(function() {
        alert(this.value)
    });
});

Это даст вам все входные значения строки.

Update:
Чтобы получить значение не всех элементов, вы можете использовать :not():

$(this).closest('tr').find("input:not([name^=desc][name^=phone])").each(function() {
     alert(this.value)
});

На самом деле, я не уверен на 100%, работает ли это так, возможно, вам придется использовать два not вместо этого, комбинируя оба условия.

Ответ 2

var values = {};
$('td input').each(function(){
  values[$(this).attr('name')] = $(this).val();
}

Не тестировали, но это должно сделать это...

Ответ 3

Мне сложно понять, что именно вы ищете здесь, так что надеюсь, что я не из базы.

Я предполагаю, что вы имеете в виду, что когда событие ввода ключей происходит на входе с классом "start", вы хотите получить значения всех входов в соседних <td> s:

    $('.start').keyup(function() {
        var otherInputs = $(this).parents('td').siblings().find('input');

        for(var i = 0; i < otherInputs.length; i++) {
            alert($(otherInputs[i]).val());
        }
        return false;
    });

Ответ 4

Может быть, это поможет.

var inputVal = $ (this).closest('tr'). find ("td: eq (x) input"). val();

Ответ 5

Я искал одно и то же решение для проекта, который я строил, но ни один из них не работал у меня. Поэтому я должен был построить один. У меня была уникальная функция добавления строк с использованием jquery, и это было реализовано тоже. Вот мой код.

<script lang="javascript">
                                            $(document).ready(function (){
												
                                                $("#add").click(function (event){
                                                    //event.preventDefault();
													
													var NumRows = $("#education > tbody tr").length;  //get the number of rows
													var nextRow = "row"+(NumRows + 1);
													
                                                    var serial_number = $("#education tr:last").attr('scope');
                                                    $('#education tr:last').after('<tr id="'+nextRow+'"><td><input type="text" class="form-control input1"></td><td><input type="text" class="form-control input2"></td><td><input type="text" class="form-control input3"></td>');
                                                    //alert("Hullo"+serial_number);
                                                });
                                                
                                                $("#save").click(function (event){
                                                    //$("").each(function(row,tr){
                                                        
                                                        var table = $( "td input:eq( 2 )" ).html();
														//css( "color", "red" );
														
														var education = new Array();
														
														var NumRows = $("#education > tbody tr").length
														var NumCols = $("#education > tbody td").length
														var NumCols = 3;
														alert("Number of rows : "+NumRows);
														alert("Number of cols : "+NumCols);
														
														//traversing through the rows
														for (var rows = 1; rows <=  NumRows; rows++)
														{ 
															alert("Row : "+rows);
															var row = "row"+rows; //produces row1, row2, row3
															
															var institution			=	"input" + (NumCols - 2);
															var qualification		=	"input" + (NumCols - 1);
															var date				=	"input" + (NumCols);
															
															alert("institution : "+$("#education #"+row+" ."+institution).val());
															alert("qualification : "+$("#education #"+row+" ."+qualification).val());
															alert("date : "+$("#education #"+row+" ."+date).val());
															
														}
														
														
                                                });
                                            });
                                        </script>

                                        <table class="table table-bordered" id="education">
                                        <thead> 
                                            <tr>
<!--                                                <th>SN</th>-->
                                                <th>INSTITUTION</th>
                                                <th>QUALIFICATION</th>
                                                <th>DATE</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr id='row1'>

                                                <td><input type="text" class="form-control input1"/></td>
                                                <td><input type="text" class="form-control input2"/></td>
                                                <td><input type="text" class="form-control input3"/></td>
                                            </tr>
                                            <tr id="row2">

                                                <td><input type="text" class="form-control input1"/></td>
                                                <td><input type="text" class="form-control input2"/></td>
                                                <td><input type="text" class="form-control input3"/></td>
                                            </tr>
                                            <tr  id="row3">

                                                <td><input type="text" class="form-control input1"/></td>
                                                <td><input type="text" class="form-control input2"/></td>
                                                <td><input type="text" class="form-control input3"/></td>
                                            </tr>
                                        </tbody>
                                    </table>
									
                                        <center>
                                            <div>
                                                <button id="add" class="btn-app btn-success">Add Education</button> 
                                                | 
                                                <button id="save" class="btn-app btn-success">Save Education</button>
                                            </div>
                                        </center>