如何发送表中已更改行的ID(html到JS)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (54)

我有7行,我只需要对编辑过的行使用我的函数。我怎么发送ID?或者有更简单的方法?我试着发送编号onChange="setprice(this.value,18,5)"最后一个是行的ID,但在拆分int+String时,我不能将其作为ID来确定。例如:var idofrow = ('setvalue'+row); $("#idofrow").html("");#idofrow不起作用

function setprice(val, ay, row) {
  var rowid_ilk = event.target.getAttribute('id');
  $("#rowid_ilk").html("");
  var total = Math.round((((({{ price_without_symbol }  } - val) / ay) * ({{      kredittable.kredit_faiz / 100 }})) + (({{ price_without_symbol }} - val) / ay)));
  var rowset = 'setvalue' + row;
  alert(rowset);
  rowset.innerHTML += total;
}
<table class="table table-striped" id="tablebrd">
  <thead>
    <tr>
      <th scope="col">{{ text_kredit_mesac }}</th>
      <th scope="col" style="width: 28%">{{ text_min_vznos }}</th>
      <th scope="col">{{ text_mes_plata }}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden1" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,3,1)" /></td>
      <td>
        <div id="setvalue1"></div>
      </td>
    </tr>
    <tr>
      <td>6 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden2" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,6,2)" /></td>
      <td>
        <div id="setvalue2"></div>
      </td>
    </tr>

    <tr>
      <td>9 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden3" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,9,3)" /></td>
      <td>
        <div id="setvalue3"></div>
      </td>
    </tr>

    <tr>
      <td>12 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden4" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,12,4)" /></td>
      <td>
        <div id="setvalue4"></div>
      </td>
    </tr>

    <tr>
      <td>18 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden5" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,18,5)" /></td>
      <td>
        <div id="setvalue5"></div>
      </td>
    </tr>

    <tr>
      <td>24 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden6" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,24,6)" /></td>
      <td>
        <div id="setvalue6"></div>
      </td>
    </tr>

    <tr>
      <td>36 {{ text_kredit_mesaca }}</td>
      <td><input type="number" name="ilkoden" id="ilkoden7" value="{{ kredittable.kredit_min_ilkin  }}" onChange="setprice(this.value,36,7)" /></td>
      <td>
        <div id="setvalue7"></div>
      </td>
    </tr>
  </tbody>
</table>

提问于
用户回答回答于

你可以访问id通过访问target事件的属性:event.target:

event.target是对发送事件的对象的引用。

然后访问它的id名字.getAttribute。并删除id名称的前七个字母,以便使用该方法获取元素的编号

event.target.getAttribute('id').substr(7)

下面是一个简单的演示:

const fn = function() {
  console.log(event.target.getAttribute('id').substr(7))
}
<div id="ilkoden11" onclick="fn()">This is item 11</div>


如果要在同一级别上选择元素的id,则需要在HTML树中进行一些导航,下面的选择器将这样做:

const div = event.target.closest('tr').querySelector('div').id;
                              ↑                  ↑
                        parent <tr>      find <div> child

以下是一个例子:

const setprice = function() {
  const target = event.target.id;
  const value = event.target.value;
  const div = event.target.closest('tr').querySelector('div').id;
  console.log(target, value, div)
}
<table>
<tr>
  <td><input id="ilkoden2" onkeyup="setprice()" /></td>
  <td>
    <div id="setvalue2"></div>
  </td>
</tr>
</table>

扫码关注云+社区

领取腾讯云代金券