0

How can we read input value into an array for all td array = [1,2,3].using pure javascript

I tried this but it creates an array of objects, but I just want to store only values in an array. Can anyone tell how it can be accomplished?

const array = [...document.querySelectorAll("table tbody tr")].map((row) => {
  const [id] = [...row.querySelectorAll('td')].map(td => td.textContent.trim());
  return { id }
})
console.log(array);
<table>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>
        <button onclick="removeName(this);">Remove</button>
        <input type="hidden" value="1" name="id" />
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>
        <button onclick="removeName(this);">Remove</button>
        <input type="hidden" value="2" name="id" />
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>
        <button onclick="removeName(this);">Remove</button>
        <input type="hidden" value="3" name="id" />
      </td>
    </tr>
  </tbody>
</table>

Improve this question
2
  • I made a snippet. It gives console errors until I change Id to id Commented Nov 17, 2020 at 9:05
  • Is your goal to get the value of each input inside of the tds? So [1, 2, 3]. Your title is confusing since you're asking to get td values, but tds don't have values Commented Nov 17, 2020 at 9:07

3 Answers 3

Reset to default
3

Try this,

const inputs = document.querySelectorAll('td input');
values = [...inputs].map(input => input.value);
console.log(values);
<table>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>
        <button onclick="removeName(this);">Remove</button>
        <input type="hidden" value="1" name="id" />
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>
        <button onclick="removeName(this);">Remove</button>
        <input type="hidden" value="2" name="id" />
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>
        <button onclick="removeName(this);">Remove</button>
        <input type="hidden" value="3" name="id" />
      </td>
    </tr>
  </tbody>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This will fail as soon as another field is added or the button is changed to input type="button"
1

If you wrap in {} you will get an object array

TO get the name=id value just do this - I added an ID to the tbody to narrow the selector

const ids = [...document.querySelectorAll("#tb [name=id]")]
 .map(fld => fld.value);

Here I get the values and the textContent

I also added an eventListener for the remove button

// input value
const ids = [...document.querySelectorAll("#tb [name=id]")]
 .map(fld => fld.value);

console.log(ids);

// cell text content

const rows = document.querySelectorAll("table tbody tr");
const names = [...rows]
 .map(row => row.firstElementChild.textContent.trim())

console.log(names);

// not part of the question

document.getElementById("tb").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove")) {
    e.preventDefault(); // or have type="button"
    tgt.closest("tr").remove();
  }  
})
<table>
  <tbody id="tb">
    <tr>
      <td>Smith</td>
      <td>
        <button  class="remove">Remove</button>
        <input type="hidden" value="1" name="id" />
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>
        <button class="remove">Remove</button>
        <input type="hidden" value="2" name="id" />
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>
        <button class="remove">Remove</button>
        <input type="hidden" value="3" name="id" />
      </td>
    </tr>
  </tbody>
</table>

Improve this answer

1 Comment

@theWellHopeErr Please remove your comment - the error is not part of the question and has been solved
0

I am sure this code is what you are looking for

const array = [...document.querySelectorAll("table tbody tr")].map((row) => {
  const tds = [...row.querySelectorAll('td')].map(td => td.textContent.trim());
  return tds
}).flat()
console.log(array);
<table>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>
        <button onclick="removeName(this);">Remove</button>
        <input type="hidden" value="1" name="id" />
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>
        <button onclick="removeName(this);">Remove</button>
        <input type="hidden" value="2" name="id" />
      </td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>
        <button onclick="removeName(this);">Remove</button>
        <input type="hidden" value="3" name="id" />
      </td>
    </tr>
  </tbody>
</table>

if the td has input inside of it then the code will be

const array = [...document.querySelectorAll("table tbody tr")].map((row) => {
      const tdInputs = [...row.querySelectorAll('td input')].map(ipnut => input.value.trim());
      return tdInputs
    }).flat()
    console.log(array);
Improve this answer

2 Comments

I'm sure it isn't. I made you a snippet. See what it returns. Then read the question: How can we read input value into an array for all td array = [1,2,3]
if the td has input in it then we can change the code liek this const tdInputss = [...row.querySelectorAll('td input')].map(input=> input.value.trim());

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.