使用jquery选择表的行和列并更新其内容

Question

我有一个HTML表格，后跟一个简单的表格，可以接受表格的行和列，如下所示

 <table border="1" style="width:100%">
   <tr>
     <td>Row 1 Col1</td>
     <td>Row 1 Col2</td>
     <td>Row 1 Col3</td>
     <td>Row 1 Col4</td>
     <td>Row 1 Col5</td>
     <td>Row 1 Col6</td>
   </tr>
   <tr>
     <td>Row 2 Col1</td>
     <td>Row 2 Col2</td>
     <td>Row 2 Col3</td>
     <td>Row 2 Col4</td>
     <td>Row 2 Col5</td>
     <td>Row 2 Col6</td>
   </tr>
     <tr>
     <td>Row 3 Col1</td>
     <td>Row 3 Col2</td>
     <td>Row 3 Col3</td>
     <td>Row 3 Col4</td>
     <td>Row 3 Col5</td>
     <td>Row 3 Col6</td>
   </tr>   
 </table> 
 <form>
      <input type="text" placeholder="Row" value="row"/>
      <input type="text" placeholder="Column" value="column"/>
      <button id="submitButton" type="submit"> Submit </button>
 </form>

表的行和列可以变化，并且可以具有n个行和列。 我想做的是基于用户输入（选择行和列并提交），我想更新用户选择的行和列的内容，说“你好”。 如果用户选择一列，则无法使用的行组合将提示错误消息。 我怎么能在jQuery中做到这一点。

提前致谢。

Answer 1

你可以这样使用

$("#submitButton").click(function (e) {
    e.preventDefault();
    var r = parseInt($("#row").val()) - 1;
    var c = parseInt($("#column").val()) - 1;
    $("table").find("tr").eq(r).find("td").eq(c).text("hello");

});

小提琴

这是一种基于undex的方法。 首先，您需要使用.eq()选择器找到第n行。 由于索引从0开始，因此您需要将实际值减1。

您可以使用.find()方法获取所有子元素。

Answer 2

$(document).ready(function(){

    $("#submitButton").click(function(){       
        var row       = parseInt($("#rows").val())-1;
        var col       = parseInt($("#cows").val())-1;
        var greeting = "hello";

        if(isNaN(row)|| isNaN(col)) {
             alert('Please enter a valid row and column number');
             return false;
        }

        var x = $("table").find("tr").eq(row).find("td").eq(col);
        if(x.length==0)
           alert('Such a row and column not found ');   
        else if(x.text()==greeting)
           alert("Already selected "); 
        else 
           x.text(greeting);
        return false;
    });
});

http://jsfiddle.net/tintucraju/fm0sL4s9/

Answer 3

$('#submitButton').click(
 function(){
   var numrow = $('#numrow').val();
   var numcol = $('#numcol').val();
   var enttotal = numrow * numcol;
   var lenrow = $('.dataupdate tr').length;
   var lencol = $('.dataupdate tr:first-child td').length;
   var tcol  = $('.dataupdate tr td').length;
 if(numrow <= lenrow &&  numcol <= lencol && enttotal <= tcol){ 
   $('.dataupdate tr:nth-child('+numrow+') td:nth-child('+numcol+')').html('Hello')
     }
  else { alert('there is no such column in this table'); }
  });

这是工作提琴链接http://jsfiddle.net/6vj92vcp/