javascript - How to apply onClick on tr except one td? - Stack Overflow

admin管理员组

文章数量:1391925

I have this table in my react ponent. I need to apply onClick on all the <tr> but need to exclude last column(<td>).

Is is possible to do that?

<tr
  className="cursor-pointer"
  key={activity._id}
  onClick={() =>
    activeTab === "active"
      ? this.setState({ activity, pleteModal: true })
      : this.setState({ activity, showModal: true })
  }
>
  <td>{moment(activity.date).format("MM/DD/YY h:mm a")}</td>
  <td>{activity.manifestNumber}</td>
  <td>
    <NumberFormat
      thousandSeparator={true}
      displayType={"text"}
      value={activity.grossWeight}
    />{" "}
    lbs
  </td>
  <td>{activity.facility.name}</td>
</tr>

I have this table in my react ponent. I need to apply onClick on all the <tr> but need to exclude last column(<td>).

Is is possible to do that?

<tr
  className="cursor-pointer"
  key={activity._id}
  onClick={() =>
    activeTab === "active"
      ? this.setState({ activity, pleteModal: true })
      : this.setState({ activity, showModal: true })
  }
>
  <td>{moment(activity.date).format("MM/DD/YY h:mm a")}</td>
  <td>{activity.manifestNumber}</td>
  <td>
    <NumberFormat
      thousandSeparator={true}
      displayType={"text"}
      value={activity.grossWeight}
    />{" "}
    lbs
  </td>
  <td>{activity.facility.name}</td>
</tr>

• javascript
• html
• reactjs
• html-table

Share Improve this question Follow edited Jun 8, 2023 at 7:52 Anurag Srivastava 14.5k44 gold badges3737 silver badges4646 bronze badges asked Jul 10, 2020 at 17:54 ProferProfer 6431010 gold badges4747 silver badges9797 bronze badges 2

• Have you tried onClick={e => e.stopPropagation()} on the last td? – Anurag Srivastava Commented Jul 10, 2020 at 18:03
• @AnuragSrivastava You nailed it. It works!!! – Profer Commented Jul 10, 2020 at 18:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can use stopPropagation() on click of the last td:

<tr
  className="cursor-pointer"
  key={activity._id}
  onClick={() =>
    activeTab === "active"
      ? this.setState({ activity, pleteModal: true })
      : this.setState({ activity, showModal: true })
  }
>
  <td>{moment(activity.date).format("MM/DD/YY h:mm a")}</td>
  <td>{activity.manifestNumber}</td>
  <td>
    <NumberFormat
      thousandSeparator={true}
      displayType={"text"}
      value={activity.grossWeight}
    />{" "}
    lbs
  </td>
  <td onClick={e => e.stopPropagation()}>{activity.facility.name}</td>
</tr>

If you give that last td an id attribute, you could use the event.target.id value in the onClick handler to not do anything if it matches that id, e.g.:

onClick={event => {
  if (event.target.id === 'someId') {
    return;
  }

  if (activeTab === "active") {
    this.setState({ activity, pleteModal: true })
  }
  else {
    this.setState({ activity, showModal: true })
  }
}}

<td id={'someId'}>{activity.facility.name}</td>

Demo: https://codesandbox.io/s/winter-frog-o9dxr

stopPropagation, only the cellHandler is called while the TR's click handler never fires.

export default function App() {
  const rowHanlder = () => {
    console.log("rowHanlder");
  };

  const cellHandler = () => {
    console.log("cellHandler");
  };

  return (
    <div className="App">
      <table border="1" cellpadding="4">
        <tr onClick={() => rowHanlder()}>
          <td>Cell #1</td>
          <td>Cell #2</td>
          <td
            onClick={(e) => {
              e.stopPropagation();
              cellHandler();
            }}
          >
            Cell #3 - Second Last Cell
          </td>
          <td
            onClick={(e) => {
              e.stopPropagation();
              cellHandler();
            }}
          >
            Cell #4 - Last Cell
          </td>
        </tr>
      </table>
    </div>
  );
}

本文标签： javascriptHow to apply onClick on tr except one tdStack Overflow