代码之家  ›  专栏  ›  技术社区  ›  Michael

如何从具有数据id属性的表行中获取数据?

jquery javascript
  •  0
  • Michael  · 技术社区  · 6 年前

    我有html表格: 

    <table data-role="table" data-mode="columntoggle:none" class="ui-responsive ui-table">
    <thead>
        <tr></tr>
    </thead>
    <tbody>
        <tr>
            <td style="vertical-align: inherit;text-align:center;">
                <label for="">...</label>
            </td>
            <td style="text-align:center;">
                <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
                    <input type="text" id="propFieldName" value="..">
                    </div>
                </td>
            </tr>
                <tr data-id="">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">numerItem</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>001</span>
                            <select>
                                <option value="">001</option>
                                <option value="">002</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr data-id="5075">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">diametr</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>6</span>
                            <select>
                                <option value="">3</option>
                                <option value="">4</option>
                                <option value="">6</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr data-id="5076">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">multi</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-49-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>no</span>
                            <select>
                                <option value="">yes</option>
                                <option value="">no</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    当我单击某个按钮时,我需要获取数据表中所有在span元素中具有数据id属性和文本的行。

    例如,根据上表,单击后的预期结果为: 

    [{ "id":"5075", "value":6 },{ "id":"5076", "value":"no" }]

    我的问题是如何从具有数据id属性和值(即值不为空)的表中仅获取行,以及如何从这些行的范围中获取文本?

    4 回复  |  直到 6 年前
        1
  •  4
  •   Satpal    6 年前

    你可以用 Has Attribute Selector [name] 目标 TR 属性与 :not() 排除空值。

    之后 .map() 获取本机数组。 

    var arr = $('tr[data-id]:not([data-id=""])').map(function() {
  return {
    id: $(this).data('id'),
    value: $(this).find('span').text()
  };
}).get();


    var arr = $('tr[data-id]:not([data-id=""])').map(function() {
  return {
    id: $(this).data('id'),
    value: $(this).find('span').text()
  };
}).get();

console.log(arr)
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table data-role="table" data-mode="columntoggle:none" class="ui-responsive ui-table">
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr>
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">...</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
          <input type="text" id="propFieldName" value="..">
        </div>
      </td>
    </tr>
    <tr data-id="">
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">numerItem</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-select">
          <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span>001</span>
            <select>
              <option value="">001</option>
              <option value="">002</option>
            </select>
          </div>
        </div>
      </td>
    </tr>
    <tr data-id="5075">
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">diametr</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-select">
          <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span>6</span>
            <select>
              <option value="">3</option>
              <option value="">4</option>
              <option value="">6</option>
            </select>
          </div>
        </div>
      </td>
    </tr>
    <tr data-id="5076">
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">multi</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-select">
          <div id="select-49-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span>no</span>
            <select>
              <option value="">yes</option>
              <option value="">no</option>
            </select>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
        2
  •  0
  •   Gaurav joshi    6 年前 

    function btnClick() {
  const data = [];
  const $rows = $("#table tr[data-id]");
  for (let i = 0; i < $rows.length; i++) {
    let obj = {};
    const $row = $($rows[i]);
    obj["id"] = $row.data("id");
    obj["value"] = $row.find('span').text();
    data.push(obj);
  }
  
  console.log(data)
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table data-role="table" data-mode="columntoggle:none" class="ui-responsive ui-table" id="table">
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr>
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">...</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
          <input type="text" id="propFieldName" value="..">
        </div>
      </td>
    </tr>
    <tr data-id="1">
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">numerItem</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-select">
          <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span>001</span>
            <select>
              <option value="">001</option>
              <option value="">002</option>
            </select>
          </div>
        </div>
      </td>
    </tr>
    <tr data-id="5075">
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">diametr</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-select">
          <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span>6</span>
            <select>
              <option value="">3</option>
              <option value="">4</option>
              <option value="">6</option>
            </select>
          </div>
        </div>
      </td>
    </tr>
    <tr data-id="5076">
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">multi</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-select">
          <div id="select-49-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span>no</span>
            <select>
              <option value="">yes</option>
              <option value="">no</option>
            </select>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<button onclick="btnClick()">get data</button>
        3
  •  0
  •   Kashyap    6 年前 
    var result = [];
$('.ui-table tr').each(function(){
    if(typeof $(this).data('id') != undefined && $(this).data('id') != '' && $(this).find('span').text().trim() != ''){
        var obj = {}
        obj.id = $(this).data('id');
        obj.value = $(this).find('span').text();
        result.push(obj); 
    }
});
        4
  •  0
  •   Dinesh Ghule    6 年前 

    $('#getData' ).click(function() {


    $("#myTable tr[data-id]").each(function(){
    var idval=$(this).attr('data-id');
    var mydata=[];
    if(idval!='' && idval!=undefined)
    {
    var cat =  $(this).children('td:nth-child(2)').children('div:nth-child(1)').children('div:first-child').children('span').text();
    mydata.push({ "id":idval, "value":cat});
    }
    
    console.log(mydata);
          
      });
   
 });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table data-role="table" id="myTable" data-mode="columntoggle:none" class="ui-responsive ui-table">
    <thead>
        <tr></tr>
    </thead>
    <tbody>
        <tr>
            <td style="vertical-align: inherit;text-align:center;">
                <label for="">...</label>
            </td>
            <td style="text-align:center;">
                <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
                    <input type="text" id="propFieldName" value="..">
                    </div>
                </td>
            </tr>
                <tr data-id="">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">numerItem</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>001</span>
                            <select>
                                <option value="">001</option>
                                <option value="">002</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr data-id="5075">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">diametr</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>6</span>
                            <select>
                                <option value="">3</option>
                                <option value="">4</option>
                                <option value="">6</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr data-id="5076">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">multi</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-49-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>no</span>
                            <select>
                                <option value="">yes</option>
                                <option value="">no</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    
     <input type="button"  value="Get Data"  id="getData" />
    推荐文章
    Newbie_Coder  ·  如何使用Jquery无画布裁剪框架
    1 年前
    usman610  ·  Javascript代码在点击回车键和点击按钮时删除行
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Carly  ·  在页面加载时滑入div,然后单击以滑入和滑出(jQuery)
    1 年前
    Community wiki  ·  jquery弹出窗口不会用按键关闭,但会点击
    1 年前
    Community wiki  ·  Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?
    1 年前
    Community wiki  ·  无法从jquery文档调用函数
    1 年前
    marzouk najib  ·  Uncaught ReferenceError:未定义FullCalendar
    2 年前
    Pepe  ·  检查“data”属性是否包含输入值的一部分(jQuery)
    2 年前
    laurence keith albano  ·  如何使用Jquery在父类内添加子父类
    2 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号