Question

所以当谈到jQuery并且继承了别人的代码时，我非常无能为力。非常感谢任何帮助。

我有一个从查询中填充的表单，因为他们将学生添加到表单中。他们可以将任意数量的学生添加到表单中。下面是html：

<table style="width:100%">
            <tr>
                <td colspan="2">
                    <label class="control-label" >Name</label>
                    <input type="text" name="name[]" value="" class="required" style="width: 290px">
                </td>
                <td colspan="2">
                    <label class="control-label" >Email</label>
                    <input type="text" name="email[]" value="" class="required">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <label class="control-label" >Address</label>
                    <input type="text" name="address1[]" value="" class="required" style="width: 290px">
                </td>
                <td colspan="2">
                    <label class="control-label" >Address 2 <small>(optional)</small></label>
                    <input type="text" name="address2[]" value="">
                </td>
            </tr>
            <tr>
                <td colspan="1">
                    <label class="control-label" >City</label>
                    <input type="text" name="city[]" value="" style="width:120px;" class="required">
                </td>
                <td>
                    <label class="control-label" >State/Providence</label>
                    <input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
                </td>
                <td>
                    <label class="control-label" >Postal Code</label>
                    <input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
                </td>
                <td>
                    <label class="control-label" >Country</label>
                    <input type="text" name="country[]" value="" class="required">
                </td>
            </tr>
            <tr><td colspan="4">&nbsp;</td></tr>
        </table>

以下是我一直试图修改的jQuery函数：

jQuery(function($){
    var addStudent = function(data){
        var studentEl = $($('.student').get(0)).clone()
        studentEl.find('input').each(function(){
            var field = $(this).attr('name').replace('[]','')
            if ($(this).attr("name").val == 'name'){
                $(this).prop("readonly", true);
            }
            $(this).val(data[field] || '')
        })
        if(data.client_no!=''){
            studentEl.find('.will_update').text("Will update student information for "+data.name+'')
        }
        $($('.student').last()).after(studentEl)
    }
})

该函数为数据库填充的每个学生创建一组额外的字段，以便处理表单。

我希望修改＆＃34; name＆＃34;的特定字段。只读（可以查看但不能修改，但仍然提交）。我已经尝试了很多其他迭代，但无法在if子句中获取字段名称，只能将该字段设为只读。

提供的任何帮助都会很棒。

Answer 1

通过jQuery获取属性的正确方法是：$(this).attr("name")

而不是使用：

var field = $(this).attr('name').replace('[]','')
            if ($(this).attr("name").val == 'name'){
                $(this).prop("readonly", true);
            }

使用您已创建的变量field：

var field = $(this).attr('name').replace('[]','')
            if (field  == 'name'){
                $(this).prop("readonly", true);
            }

请参阅下面的代码段：

jQuery(function($) {
  var addStudent = function(data) {
    var studentEl = $($('.student').get(0)).clone()
    studentEl.find('input').each(function() {
      var field = $(this).attr('name').replace('[]', '')
      if (field == 'name') {
        $(this).prop("readonly", true);
      }
      $(this).val(data[field] || '')
    })
    if (data.client_no != '') {
      studentEl.find('.will_update').text("Will update student information for " + data.name + '')
    }
    $($('.student').last()).after(studentEl)
  }

  $('button').click(function() {
    addStudent({
      client_no: 1,
      name: "Ralph John "
    })
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" class="student">
  <tr>
    <td colspan="2">
      <label class="control-label">Name</label>
      <input type="text" name="name[]" value="" class="required" style="width: 290px">
    </td>
    <td colspan="2">
      <label class="control-label">Email</label>
      <input type="text" name="email[]" value="" class="required">
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <label class="control-label">Address</label>
      <input type="text" name="address1[]" value="" class="required" style="width: 290px">
    </td>
    <td colspan="2">
      <label class="control-label">Address 2 <small>(optional)</small>
      </label>
      <input type="text" name="address2[]" value="">
    </td>
  </tr>
  <tr>
    <td colspan="1">
      <label class="control-label">City</label>
      <input type="text" name="city[]" value="" style="width:120px;" class="required">
    </td>
    <td>
      <label class="control-label">State/Providence</label>
      <input type="text" name="st_prov[]" value="" style="width:120px;" class="required">
    </td>
    <td>
      <label class="control-label">Postal Code</label>
      <input type="text" name="zip_pc[]" value="" style="width:60px;" class="required">
    </td>
    <td>
      <label class="control-label">Country</label>
      <input type="text" name="country[]" value="" class="required">
    </td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
  </tr>
</table>

<button>Add Student</button>

Answer 2

您的代码中存在问题。

使用SeasonTeamID代替$('student').eq(0)

您从jquery对象获取dom元素并将其重新包装到jquery对象中。 $($('.student').get(0))函数返回一个jquery包装元素。

您正试图从eq(index)获取val属性，该属性返回一个字符串。你会得到不确定的。

attr("name")

如果您正在尝试查找name属性的存在，请执行

if ($(this).attr("name").val == 'name'){
   $(this).prop("readonly", true);
}

最后，您不需要使用jquery对象重新包装jquery对象。

if ($(this).attr("name")){
   $(this).prop("readonly", true);
}

Jquery函数返回jquery对象，这意味着你可以链接调用，而不需要重新调用它。

$($('.student').last())

Answer 3

您可以按如下方式修改代码。假设您的表格中有student类，这是一个有效的演示 - Fiddle。

$(function(){
    var addStudent = function(data){
        var studentEl = $('.student tr:first').clone();
        studentEl.find('input').each(function(){
            var field = $(this).attr('name').replace('[]','');
            if (field === 'name'){
                $(this).prop("readonly", true);
            }
            $(this).val(data[field] || '')
        })
        if(data.client_no !== ''){
            studentEl.find('.will_update').text("Will update student information for "+data.name+'')
        }
        $('.student').last().after(studentEl)
    }
});

将表单输入更改为仅在复制元素时读取

3 个答案: