Question

我有一个html，允许我添加或删除行数（div）和一个允许我读取行数（div）的按钮所以行如下

<div id="mainContent">
            <div id="StaffRow" class="WorkItemRow row" display:none;">
                <div id="selections">
                    <select class="form-control">
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div>
                    Name
                </div>
                <div>
                    <input id="MemberName" type="text" value="">
                </div>
                <div>
                    Mail
                </div>
            <div>
                <input type="text" id="Mail" value="">
            </div>


    </div>

我设法克隆了这行

$('#ButtonAddStaff').click(function (e) {
    counters++;
    $("#StaffRow").clone(true).attr('id', "#StaffRow" + staffCount).appendTo("#mainContent");
    $(".WorkItemRow").last().css('display', '');

});

但现在问题是我似乎无法迭代创建的staffrow并获取数据。

我已经尝试过这样的数据，但它返回了我未定义的

    for (let i = (counters- 1) ; i >= 0; i--) {
        if (counters!= 1)
            var nameData= document.getElementById('StaffRow' + i).children("#MemberName").val();
        nameData= document.getElementById('StaffRow' + i);
        list.push(nameData);
    }

我应该在哪里想要实现我想要的目标？

所以我想要做的是迭代按下按钮后创建的创建的staffrow并在每行中获取membername的值

Answer 1

我认为你的问题在这里：

.attr('id', "#StaffRow" + staffCount)

当你这样做时，你实际上设置了尖锐的id。此函数的第二个参数不是一种选择器。然后你做一个没有这个尖锐的document.getElementById。

您应该使用：

.attr('id', "StaffRow" + staffCount)

Answer 2

以下可能会有所帮助，如果您需要更多帮助，请告诉我。

此代码不依赖于id，而是使用名为x-role的用户定义属性来指示此元素在您的程序中的作用。

document.querySelector('#ButtonAddStaff').addEventListener(
  "click",
  function (e) {
    const newRow = document.querySelector("#StaffRow").cloneNode(true);
    //remove the id, no 2 same id's should be the same in dom
    newRow.removeAttribute("id");
    //set the x-role attribute, could set it on the hidden first but
    //  have to use .slice(1) when getting all the rows in getAllStaffRows
    newRow.setAttribute("x-role","staffrow");
    //show the row
    newRow.style.display="";
    document.querySelector("#mainContent").append(newRow);
  }
);
//keep going to parent until we reach document or until function passed in
//  returns true
const getParentUntil = fn => el => {
  if(el===document.body){
    return false;
  }
  if(fn(el)){
    return el;
  }
  //keep calling itself until we find the correct parent
  // or until we reach document
  return getParentUntil(fn)(el.parentElement);
}


//remove handler
document.getElementById("mainContent").addEventListener(
  "click",
  e=>{
    if(e.target.getAttribute("x-role")==="remove"){
      const staffRow = getParentUntil(x=>x.getAttribute("x-role")==="staffrow")(e.target);
      if(staffRow){
        staffRow.remove();
      }
    }
  }
)
document.querySelector('#logdata').addEventListener(
  "click",
  function (e) {
    console.log(
      JSON.stringify(
        getAllStaffRows(),
        undefined,
        2
      )
    )
  }
);

const getAllStaffRows = () =>
  //get all html elements that have x-role attribute of staffrow
  Array.from(document.querySelectorAll(`[x-role='staffrow']`))
  //map the row elements into objects that contain the input values
  .map(
    row=>({
      //find the element with x-role attribute that has a membername value
      name:row.querySelector(`[x-role='membername']`).value,
      //do this for selections and mail as well
      selection:row.querySelector(`[x-role='selections']`).value,
      mail:row.querySelector(`[x-role='mail']`).value
    })
  );

      <input type="button" value="add" id="ButtonAddStaff">
      <input type="button" value="log values" id="logdata">
      <div id="mainContent">
        <div id="StaffRow" class="WorkItemRow row" style="display:none;">
            <div>
                <select class="form-control " x-role="selections">
                    <option value=" "></option>
                    <option value="1 ">1</option>
                    <option value="2 ">2</option>
                    <option value="3 ">3</option>
                </select>
            </div>
            <div>
                Name
            </div>
            <div>
                <input x-role="membername" type="text " value=" ">
            </div>
            <div>
                Mail
            </div>
        <div>
            <input type="text " x-role="mail" value=" ">
        </div>
        <div>
            <input type="button" x-role="remove" value="remove">
        </div>

克隆div并在div

2 个答案: