Как получить значение типа ввода внутри ячейки таблицы? - PullRequest
Новая
       18

Как получить значение типа ввода внутри ячейки таблицы?

2 голосов
/ 14 мая 2019

У меня есть следующая таблица: 

<tbody id="TableBodyId">
  <tr>
    <td>First Value</td>
    <td><input type="text" size="5" value="Second Value"></td>
  </tr>
</tbody>

Я хочу знать, как можно извлечь как first value, так и second value, используя JS или Jquery.Ранее моя таблица выглядела так: 

<tbody id="TableBodyId">
  <tr>
    <td>First Value</td>
    <td>Second Value</td>
  </tr>
</tbody>

И чтобы получить значения, я сделал это, используя jQuery: 

var TableData = new Array();

$('#TableBodyId tr').each(function(row, tr)
{
    TableData[row] = {
        "firstValue" : $(tr).find('td:eq(0)').text(),
        "secondValue": $(tr).find('td:eq(1)').text()
    }
});

Затем я решил, что хочу иметь возможностьчтобы изменить значения во второй ячейке, я сделал это следующим образом: 

<input type="text" size="5" value="Second Value"/>

Теперь проблема в том, что tableData во второй ячейке равен "" (другими словами, пусто).Чтобы решить эту проблему, я попытался сделать: 

"firstValue": $(tr).find('td:eq(0)').text(),
"secondValue": $(tr).find('td:eq(1)').val()

Но не повезло, второе значение по-прежнему выглядит как "".Есть идеи, как это решить?

Ответы [ 2 ]

3 голосов
/ 14 мая 2019

Вам необходимо получить значение из элемента <input>, например: 

TableData[row] = {
    "firstValue" : $(tr).find('td:eq(0)').text(),
    "secondValue": $(tr).find('td:eq(1) input').val()
}

Пример: 

$(document).ready(function()
{
    var TableData = [];

    $('#TableBodyId tr').each(function(row, tr)
    {
        TableData[row] = {
            "firstValue" : $(tr).find('td:eq(0)').text(),
            "secondValue": $(tr).find('td:eq(1) input').val()
        }
    });
    
    console.log(TableData);
});
.as-console {background-color:black !important; color:lime;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tbody id="TableBodyId">
    <tr>
      <td>First Value</td>
      <td><input type="text" value="Second Value"></td>
    </tr>
  </tbody>
</table>
1 голос
/ 14 мая 2019

Изменить 

"secondValue" :$(tr).find('td:eq(1)').val()

на 

"secondValue" :$(tr).find('td input:eq(0)').val()
...