时间戳

首页 > 解决方案 > 获取表格行元素的每个子td的输入html标签的id、名称、类型、值和文本

javascript - 获取表格行元素的每个子td的输入html标签的id、名称、类型、值和文本

问题描述

我想在表格的每个 td 元素之间显示一个带有输入 html 标记的 id、名称、类型、值和文本的表格。我们需要记录这些细节以改进应用程序。

问题： 更改以下脚本以获取每个 td 元素之间的输入 html 标记的 id、名称、类型、值和文本

脚本：

$(document).ready(function(){
  $("table").click(function(){
    alert("Clicked");
   $("table").each(function(){
      var $this = $(this);      //1.Get the table data
      $this.children("tr").each(function(){ // 2.loop through tr elements
        $this.children("td").each(function(){ //3.loop through td and  get 
        //html element between td elements to get their prop given below
        console.log()(this.html().prop('id')); //4.Get id,Name,type() and value
        console.log(this.html().prop('name'));
        console.log(this.html().prop('type'));
            console.log(this.html().prop('value'));
        console.log(this.text);
        });
    });
});
});
});

HTML 代码：

 <body>
    <table>
      <tr>
        <td class="tg-0pky" >First row TD</td>
        <td class="tg-0pky" ><input type="text" id="text1" name="num2" value="123"/></td>
      </tr>
      <tr>
        <td class="tg-0pky" >Second row TD</td>
        <td class="tg-0pky" ><input type="radio" id="MA" name="radio1" value="<%=myRadioValue1%>" />Radio1</td>
        <td class="tg-0pky" ><input type="radio" id="FA" name="radio2" value="<%=myRadioValue2%>" />Radio2</td>
      </tr>
        <td class="tg-0pky" >Third row TD</td>
        <td class="tg-0pky" ><input type="checkbox" id="ch1" name="checkbox1" value="<%=myCheckbox%>">CheckBox1</td>
        <td class="tg-0pky" ><input type="checkbox" id="ch2" name="checkbox2" value="<%=myCheckbox%>">CheckBox2</td>
        <td class="tg-0pky">*&7454</td>
      </tr>
      <tr>
        <td class="tg-0pky" type="text" name="num2" id="select1" value="<%=myValue%>">Fourth Row TD</td>
    <td>
        <select id="selected" name="dropdown" value="<%=myDropDown%>">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
       </select></td>
      </tr>

    </table>
    </body>
    </html>

最终输出需要输入元素中存在的 id、名称、类型、值和文本，这些输入元素存在于表的每个“tr”的“td”元素之间

标签： javascriptjqueryhtml

解决方案

在纯 JavaScript 中。

const inputAttributes = {
    ID: 'id',
  NAME: 'name',
  TYPE: 'type',
  VALUE: 'value'
};
const inputs = document.querySelectorAll('tr td input');

inputs.forEach(input => {
    // Input attributes
    [...input.attributes].forEach(attribute => {
    switch(attribute.name) {
        case inputAttributes.ID:
        attribute.name; // attribute id
        attribute.value; // value of attribute id
        break;
      case inputAttributes.NAME:
        attribute.name; // attribute name
        attribute.value; // value of attribute name
        break;
      case inputAttributes.TYPE:
        attribute.name; // attribute type
        attribute.value; // value of attribute type
        break;
      case inputAttributes.VALUE:
        attribute.name; // attribute value
        attribute.value; // value of attribute value
        break;
    }
  });

  // Text next to input
  input.nextSibling; // Radio1, Radio2, CheckBox1, CheckBox2
});

推荐阅读