Expanding Only One Row When Button Clicked

Expanding only one row when button clicked

$('#ResultProduct > .RMAJS').each( function( i, el) {
    $(el).on("click", function (e) {
        $(this).next('.section').toggle("slow");
        // or $(this).next('.section').css("display","");

    });

});

that's it, got to use next ...

How can I expand the row only when that row was clicked?

Wrap TableRow in a component

const Row = ({item}) => {
  const [open, setOpen] = useState(false);

  return <TableRow>...</TableRow>
}

<TableBody>
  {data.map((item, index) => (
    <Row key={index} item={item} />
  ))}
</TableBody>

Edit table-collapse

Expanding rows only when button clicked

You are missing the closest you should not use next as next will be the next element, but your section is next to tr not next to td, so you will have to first find the tr and then next section.

$('.sendRMA').on("click", function() {
  $(this).closest('tr').next('.section').toggle("slow");
});

$('.sendRMA').on("click", function() {  $(this).closest('tr').next('.section').toggle("slow");});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="table">  <thead>    <tr>      <th>Varenummer</th>      <th>Beskrivelse</th>      <th></th>    </tr>  </thead>  <tbody id="ResultProduct">    <tr class="RMAJS">      <td id="varnummer" name="varnummer">61A6MAT3</td>      <td id="Beskrivelse" name="Beskrivelse">Lenovo T24</td>      <td><button type="submit" class="sendRMA">Anmod om RMA</button></td>    </tr>    <tr style="display:none;" class="section">      <td>test</td>    </tr>
    <tr class="RMAJS">      <td id="varnummer" name="varnummer">AMAT3</td>      <td id="Beskrivelse" name="Beskrivelse">Dell</td>      <td><button type="submit" class="sendRMA">Anmod om RMA</button></td>    </tr>    <tr style="display:none;" class="section">      <td>test</td>    </tr>  </tbody></table>

Collapsed Table Row is not Expanding on button click

Your document.getElementByID(). should be document.getElementById().

Use Id not ID

function showDeets(theDeets) { 
alert("The details name theDeets");
document.getElementById("deets").style.visibility = "visible";
}

note, I have used visible but I think "initial" will work.

I have made a quick JSbin for you

https://jsbin.com/xopixipeyu/1/edit?html,js,output

Somehow I also think that your argument won't work as you use "$i . Deets" for the argument and then in your JS "theDeets" (maybe you have that under control)

How to expand and collapse the table rows in plain react js. Show only one row if the description of the row is multiple and show the expand button

You can keep another field called visible along with your data array and toggle its value when clicked on the button.

Define a state to store the transformedRows

  state = {
    transformedRows: {}
  };

Do the transformation like below in componentDidMount.

  componentDidMount = () => {
    const descriptionSortedArray = rows.reduce((acc, current) => {
      acc[current.description.value] = {
        ...acc[current.description.value],
        data: [...(acc[current.description.value]?.["data"] ?? []), current],
        visible: false
      };
      return acc;
    }, {});

    const sortRowsByDate = (rows) =>
      rows.sort(
        (a, b) => new Date(b.DueDate.value) - new Date(a.DueDate.value.data)
      );

    const transformedRows = Object.keys(descriptionSortedArray).reduce(
      (acc, current) => {
        acc[current] = {
          ...descriptionSortedArray[current],
          data: sortRowsByDate(descriptionSortedArray[current]["data"])
        };
        return acc;
      },
      {}
    );
    this.setState({ transformedRows });
  };

Toggle the visible state when clicking on the button.

  handleToggle = (entry, visibility) => {
    this.setState((prevState) => {
      return {
        ...prevState,
        transformedRows: Object.fromEntries(
          Object.entries(prevState.transformedRows).map(([key, value]) => {
            if (key === entry) {
              return [key, { ...value, visible: visibility }];
            } else {
              return [key, value];
            }
          })
        )
      };
    });
  };

Render rows as below.


<tbody>
    {Object.entries(transformedRows).map(([key, { data, visible }]) => {
        if (data.length > 1) {
            return data.map((item, index) => (
                <tr>
                    {(index === 0 || (index >= 1 && visible)) && (
                        <>
                            <td>{item.id.value}</td>
                            <td>{item.description.value}</td>
                            <td>{item.DueDate.value}</td>
                        </>
                    )}
                    {index === 0 && (
                        <td>
                            {
                                <button
                                    onClick={() => {
                                        this.handleToggle(key, !visible);
                                    }}
                                >
                                    toggle
                                </button>
                            }
                        </td>
                    )}
                </tr>
            ));
        } else {
            return data.map(item => (
                <tr>
                    <td>{item.id.value}</td>
                    <td>{item.description.value}</td>
                    <td>{item.DueDate.value}</td>
                </tr>
            ));
        }
    })}
</tbody>

Edit focused-dew-zpv76

Jquery expand hidden table row on button click

Try this

$(document).on('click', 'input[name="ownorwant"]', function(){    if($(this).val() == 'own'){        $(this).closest('tbody').find('.child1').show();    }else{        $(this).closest('tbody').find('.child3').show();    }});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table>    <tbody>        <tr class="parent">            <td><input type="button" name="ownorwant" value="own"></td>            <td><input type="button" name="ownorwant" value="want"></td>        </tr>        <tr style="display: none;" class="child1">             <td><input type="button" name="size" value="big" /></td>            <td><input type="button" name="size" value="small" /></td>        </tr>        <tr style="display: none;" class="child3">             <td><input type="submit" name="save" value="save" /></td>        </tr>    </tbody>    <tbody>        <tr class="parent">            <td><input type="button" name="ownorwant" value="own"></td>            <td><input type="button" name="ownorwant" value="want"></td>        </tr>        <tr style="display: none;" class="child1">             <td><input type="button" name="size" value="big" /></td>            <td><input type="button" name="size" value="small" /></td>        </tr>        <tr style="display: none;" class="child3">             <td><input type="submit" name="save" value="save" /></td>        </tr>    </tbody></table>

Expand table rows using buttons

In your expandTable function, you can change the jQuery selector to this to target the button:

$('.header>th>button')

Then you can traverse back up the DOM to to target the the <tr> with the jQuery .closest() selector.

See snippet below.

buildTable(3);
expandTable();

function expandTable() {
  $('.header>th>button').click(function() {
    $(this)
      .closest(`tr`)
      .toggleClass('expand')
      .nextUntil('tr.header')
      .slideToggle(400);
  });
}

function buildTable(data1) {
  var table = document.getElementById('myTable');
  var row = '';

  for (var i = 0; i < data1; i++) {
    row += `<tr class ="header">
                <th> <button> + </button> row ${i} </th>
            </tr>
            <tr style="display: none;">
                <td> Expandable for row ${i} </td>
            </tr>`;
  }
  table.innerHTML += row;
}

td {
  text-align: left;
  font-size: 14px;
  border: 1px solid black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table>
  <tbody id="myTable">
  </tbody>
</table>

Expanding Only One Row When Button Clicked