Question

如何在任何单元格中检测html表中的更改？目前我只能检测一个单元格中的变化，我可以为所有表格单元格ID重复相同的代码，但想知道是否有一种有效的方法。

请注意，我的表单中还有其他输入，只希望检测与下表相关的输入：

代码：

HTML：

<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>

的javascript：

var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
    alert("aha");
    var data = $('#'+drawing_input).val();
});

Answer 1

使用jQuery，您无需如此具体。只需更改选择器即可监听所有<input>。

$('input').on('change',

此选择器将选择页面上的每个<input>。

或者，如果您需要隔离表的输入，请在选择器中添加表的id。

$('#xTable input').on('change'...

此选择器将选择表格中的每个<input>。

看到你只需要用id监听输入。如果是，那么您可以使用括号和^=：

$("#xTable input[id^='drawing-n-']").on('change'....

这意味着获得<input> [ id ^= "drawing-n-" ] <table> id xTable input#drawing-n-1 input#drawing-n-2 $("#xTable input[id^='drawing-n-']").on('change', function(e) { var data = $(this).val(); console.log(data); }); <table id="xTable" border="1" data-mini="true"> <tbody> <tr> <th>Drawing Number</th> <th>Description</th> <th>Sheet Number</th> <th>Issue</th> </tr> <tr> <td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td> <td><input name="drawing-d-1" type="text" /></td> <td><input name="drawing-s-1" type="text" /></td> <td><input name="drawing-i-1" type="text" /></td> <td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td> <td><input name="drawing-d-2" type="text" /></td> <td><input name="drawing-s-2" type="text" /></td> <td><input name="drawing-i-2" type="text" /></td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>的{{1}}。

该选择器只会选择package com.example.mogli.henabenparekhrajthakkar_comp304_lab4; import android.content.ContentValues; import android.content.Context; import android.database.Cursor; import android.database.sqlite.SQLiteDatabase; import android.database.sqlite.SQLiteOpenHelper; import android.util.Log; import android.widget.Toast; import java.util.ArrayList; import java.util.List; /** * Created by Mogli on 11/30/2017. */ public class SqlHelper extends SQLiteOpenHelper { private static final int DATABASE_VERSION = 1; private static final String DATABASE_NAME = "hospital.db"; //nurse table name & columns private static final String NURSE_TABLE_NAME = "nurses"; private static final String NURSE_COLUMN_ID = "nurseId"; private static final String NURSE_COLUMN_FIRST_NAME = "nurseFirstName"; private static final String NURSE_COLUMN_LAST_NAME = "nurseLastName"; private static final String NURSE_COLUMN_DEPARTMENT = "nurseDepartment"; private static final String NURSE_COLUMN_PASSWORD = "nursePassword"; //doctor table name & columns private static final String DOCTOR_TABLE_NAME = "doctors"; private static final String DOCTOR_COLUMN_ID = "doctorId"; private static final String DOCTOR_COLUMN_FIRST_NAME = "doctorFirstName"; private static final String DOCTOR_COLUMN_LAST_NAME = "doctorLastName"; private static final String DOCTOR_COLUMN_DEPARTMENT = "doctorDepartment"; private static final String DOCTOR_COLUMN_PASSWORD = "doctorPassword"; private static final String NURSE_TABLE_CREATE = "create table if not exists nurses( nurseId text primary key not null, " + "nurseFirstName text not null, nurseLastName text not null, nurseDepartment text not null, nursePassword text not null );"; private static final String DOCTOR_TABLE_CREATE = "create table if not exists doctors( doctorId text primary key not null, " + "doctorFirstName text not null, doctorLastName text not null, doctorDepartment text not null, doctorPassword text not null );"; //insert query /*private String insertIntoNurse = "INSERT INTO nurses (nurseId, nurseFirstName, nurseLastName, nurseDepartment, nursePassword)" +"VALUES ('john123', 'john', 'doe', 'd1', '123john' ), ('jonahdoe', 'jonah', 'doe', 'd2', '123jonah'), ('hannah123', 'hannah', 'montana', 'd3', 'hm123');";*/ public SqlHelper(Context context) { super(context, DATABASE_NAME, null, DATABASE_VERSION); } @Override public void onCreate(SQLiteDatabase sqLiteDatabase) { try { sqLiteDatabase.execSQL(NURSE_TABLE_CREATE); sqLiteDatabase.execSQL(DOCTOR_TABLE_CREATE); } catch(Exception e) { Log.d("myMsg", "Error creating table"); } } @Override public void onUpgrade(SQLiteDatabase sqLiteDatabase, int i, int i1) { String nurse_query = "DROP TABLE IF EXISTS " + NURSE_TABLE_NAME; String doctor_query = "DROP TABLE IF EXISTS " + DOCTOR_TABLE_NAME; sqLiteDatabase.execSQL(nurse_query); sqLiteDatabase.execSQL(doctor_query); onCreate(sqLiteDatabase); } public boolean checkUser(String email, String password) { // array of columns to fetch String[] columns = { NURSE_COLUMN_ID }; SQLiteDatabase db = this.getReadableDatabase(); // selection criteria String selection = NURSE_COLUMN_ID + " = ?" + " AND " + NURSE_COLUMN_PASSWORD + " = ?"; // selection arguments String[] selectionArgs = {email, password}; // query user table with conditions /** * Here query function is used to fetch records from user table this function works like we use sql query. * SQL query equivalent to this query function is * SELECT user_id FROM user WHERE user_email = 'jack@androidtutorialshub.com' AND user_password = 'qwerty'; */ Cursor cursor = db.query(NURSE_TABLE_NAME, //Table to query columns, //columns to return selection, //columns for the WHERE clause selectionArgs, //The values for the WHERE clause null, //group the rows null, //filter by row groups null); //The sort order int cursorCount = cursor.getCount(); cursor.close(); db.close(); if (cursorCount > 0) { return true; } return false; } public String searchPass(String NURSE_COLUMN_ID) { SQLiteDatabase sqLiteDatabase = this.getWritableDatabase(); String query = "select nurseId, nursePassword from "+ NURSE_TABLE_NAME; Cursor cursor =sqLiteDatabase.rawQuery(query, null); String a, b; b = ""; if(cursor.moveToFirst()) { do { a = cursor.getString(0); b = cursor.getString(1); if(a.equals(NURSE_COLUMN_ID)) { b = cursor.getString(1); break; } } while(cursor.moveToNext()); } return b; } public void addNurses(Nurse nurse) { SQLiteDatabase db = this.getWritableDatabase(); ContentValues values = new ContentValues(); values.put(NURSE_COLUMN_ID, nurse.getNurseId()); values.put(NURSE_COLUMN_FIRST_NAME, nurse.getNurseFirstName()); values.put(NURSE_COLUMN_LAST_NAME, nurse.getNurseLastName()); values.put(NURSE_COLUMN_DEPARTMENT, nurse.getNurseDepartment()); values.put(NURSE_COLUMN_PASSWORD, nurse.getNursePassword()); db.insert(NURSE_TABLE_NAME,null,values); db.close(); } public List<Nurse> getAllNurses() { List<Nurse> nurseList = new ArrayList<Nurse>(); // Select All Query String selectQuery = "SELECT * FROM " + NURSE_TABLE_NAME; SQLiteDatabase db = this.getWritableDatabase(); Cursor cursor = db.rawQuery(selectQuery, null); // looping through all rows and adding to list if (cursor.moveToFirst()) { do { Nurse nurse = new Nurse(); nurse.setNurseId(cursor.getString(0)); nurse.setNurseFirstName(cursor.getString(1)); nurse.setNurseLastName(cursor.getString(2)); nurse.setNurseDepartment(cursor.getString(3)); nurse.setNursePassword(cursor.getString(4)); // Adding contact to list nurseList.add(nurse); } while (cursor.moveToNext()); } // return contact list return nurseList; } }和.document, .meta, .viewer, .other-doc { -ms-overflow-style: scrollbar; }

演示

 autoindex on;

{{1}}

Answer 2

event delegation

$("tbody").on("change", "input", function () {
    console.log(this.name, this.value)
});

检测html表格单元格值的变化

2 个答案:

演示