CODEWITHSUNDEEP
javascriptjquery
ICoded
ICoded

Reputation: 341

How to get a input field value which is located in a table td

How to receive the value from an input field, which is located in an table td? The click button console.log temp which again contains the innerText of each table td. I am struggling to address the second cell for each row, where I want to receive the value from the input field.

What would be best practice?

 var data = [
            {
                "name": "Paul",
                "birthday": "01.01.2000"
            },
            {
                "name": "Lisa",
                "birthday": "04.04.1998"
            },
            {
                "name": "Kyle",
                "birthday": "08.08.1990"
            },
            {
                "name": "Cindy",
                "birthday": "12.12.2002"
            }
        ]

        var table = document.getElementById("table")

        createTable()

        function createTable() {
            for (var i = 0; i < data.length; i++) {
                tableDateRow = `<tr id="row${i}">
                    <td>${data[i].name}</td>
                    <td><input type="text" class="datepicker" value="${data[i].birthday}"></td>
                    </tr>`
                table.innerHTML += tableDateRow
            }
        }

        $(".datepicker").datepicker({
            dateFormat: "dd.mm.yy",
            showOtherMonths: true,
            selectOtherMonths: true,
        })

        var button = document.getElementById("click")

        button.addEventListener("click", function () {
            const temp = []

            $("table tr").each(function () {
                var rowDataObject = new Object;
                var actualData = $(this).find('td');
                if (actualData.length > 0) {
                    rowDataObject.name = actualData[0].innerText;
                    rowDataObject.birthday = actualData[1].innerText;
                    // get input field value and store in rowDataobject.birthday
                    temp.push(rowDataObject)
                }
            })
            console.log(temp)
        })
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
    <table id="table">
        <tbody>
            <!-- filled by script -->
        </tbody>
    </table>

    <button id="click">Click</button>
</body>

</html>

Upvotes: 1

Views: 210

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To do what you require you can use jQuery's find() method to retrieve all the tr within the table. From there you can use map() to create an array of objects containing the values.

Also note that your current code uses a mix of plain JS and jQuery. If you're already including jQuery in the page then you may as well use it. As such you can simplify the code quite a lot, and also make it more robust by passing references to the functions instead of relying on variable declared at a higher scope.

Try this:

var data = [{ "name": "Paul", "birthday": "01.01.2000" }, { "name": "Lisa", "birthday": "04.04.1998" }, { "name": "Kyle", "birthday": "08.08.1990" }, { "name": "Cindy", "birthday": "12.12.2002" }]
var $table = $("#table");
var $button = $("#click");

createTable($table)

function createTable($t) {
  let html = data.map(row => `<tr><td>${row.name}</td><td><input type="text" class="datepicker" value="${row.birthday}"></td></tr>`);
  $t.append(html);
}

$(".datepicker").datepicker({
  dateFormat: "dd.mm.yy",
  showOtherMonths: true,
  selectOtherMonths: true,
})

$button.on("click", e => {
  let temp = $table.find('tbody tr').map((i, el) => ({
    name: el.querySelector('td:nth-child(1)').innerText,
    birthday: el.querySelector('input').value.trim()
  })).get();
  console.log(temp)
})
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<table id="table">
  <tbody>
    <!-- filled by script -->
  </tbody>
</table>

<button id="click" type="button">Click</button>

Upvotes: 1

Related Questions