百度Ai根据对象数组生成表单函数

合集 - js(9)

1.跟我一起学写jQuery插件开发方法（附完整实例及下载）2023-08-112.JavaScript根据json生成html表格的示例代码2023-08-143.https://gitee.com/sxwnl 寿星万年历 开源的2023-08-174.js 对象的遍历输出表格2023-08-205.js全选反选 很重要的 很简洁的 必须掌握的2023-08-246.tomcat亲自编写的倒计时定时器功能js2023-08-267.S调用函数时什么时候加小括号（）？什么时候不加小括号（）？2023-08-278.使用JS，动态给下拉列表添加option 选项2023-08-30

9.百度Ai根据对象数组生成表单函数2023-09-01

收起

百度Ai根据对象数组生成表单函数

/ 对象数组
const objectsArray = [
  { name: 'John', age: 25, email: 'john@example.com' },
  { name: 'Jane', age: 30, email: 'jane@example.com' },
  { name: 'Bob', age: 35, email: 'bob@example.com' }
];

// 生成表单函数
function generateForm(objectsArray) {
  const form = document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', '#');

  objectsArray.forEach(object => {
    const inputField = document.createElement('input');
    inputField.setAttribute('type', 'text');
    inputField.setAttribute('name', 'name');
    inputField.setAttribute('value', object.name);
    form.appendChild(inputField);

    const ageField = document.createElement('input');
    ageField.setAttribute('type', 'number');
    ageField.setAttribute('name', 'age');
    ageField.setAttribute('value', object.age);
    form.appendChild(ageField);

    const emailField = document.createElement('input');
    emailField.setAttribute('type', 'email');
    emailField.setAttribute('name', 'email');
    emailField.setAttribute('value', object.email);
    form.appendChild(emailField);
  });

  const submitButton = document.createElement('input');
  submitButton.setAttribute('type', 'submit');
  submitButton.setAttribute('value', 'Submit');
  form.appendChild(submitButton);

  return form;
}

// 调用生成表单函数并添加到页面中
const form = generateForm(objectsArray);
document.body.appendChild(form);

 

以下是带有select 

// 对象数组
const objectsArray = [
  { name: 'John', age: 25, gender: 'Male', interests: ['Reading', 'Sports'] },
  { name: 'Jane', age: 30, gender: 'Female', interests: ['Music', 'Traveling'] },
  { name: 'Bob', age: 35, gender: 'Male', interests: ['Cooking', 'Photography'] }
];

// 生成表单函数
function generateForm(objectsArray) {
  const form = document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', '#');

  objectsArray.forEach(object => {
    const inputField = document.createElement('input');
    inputField.setAttribute('type', 'text');
    inputField.setAttribute('name', 'name');
    inputField.setAttribute('value', object.name);
    form.appendChild(inputField);

    const ageField = document.createElement('input');
    ageField.setAttribute('type', 'number');
    ageField.setAttribute('name', 'age');
    ageField.setAttribute('value', object.age);
    form.appendChild(ageField);

    const genderSelect = document.createElement('select');
    genderSelect.setAttribute('name', 'gender');
    genderSelect.setAttribute('value', object.gender);

    const maleOption = document.createElement('option');
    maleOption.setAttribute('value', 'Male');
    maleOption.textContent = 'Male';
    genderSelect.appendChild(maleOption);

    const femaleOption = document.createElement('option');
    femaleOption.setAttribute('value', 'Female');
    femaleOption.textContent = 'Female';
    genderSelect.appendChild(femaleOption);

    form.appendChild(genderSelect);

    const interestsContainer = document.createElement('div');
    object.interests.forEach(interest => {
      const interestCheckbox = document.createElement('input');
      interestCheckbox.setAttribute('type', 'checkbox');
      interestCheckbox.setAttribute('name', 'interests[]');
      interestCheckbox.setAttribute('value', interest);
      interestsContainer.appendChild(interestCheckbox);
      const interestLabel = document.createElement('label');
      interestLabel.textContent = interest;
      interestsContainer.appendChild(interestLabel);
    });
    form.appendChild(interestsContainer);
  });

  const submitButton = document.createElement('input');
  submitButton.setAttribute('type', 'submit');
  submitButton.setAttribute('value', 'Submit');
  form.appendChild(submitButton);

  return form;
}

// 调用生成表单函数并添加到页面中
const form = generateForm(objectsArray);
document.body.appendChild(form);

 

以上两段代码测试通过可用